コンポーネント入力の値が未定義です

Question

編集フォームを持つ別のコンポーネントにあるコンポーネントから投稿を渡そうとしています。外部コンポーネントはポストをフェッチし、編集のために内部コンポーネントに渡しますが、何らかの理由でそれが通過しないため、未定義のエラーが発生します。

外成分HTMLは次のようになります

<wie-edit-post-form *ngIf="post | async; else loading"></wie-edit-post-form> 
<ng-template #loading> 
    <wie-loading></wie-loading> 
</ng-template> 

外成分typescriptですが、このようになります。

import { Component, OnInit } from '@angular/core'; 
import {ActivatedRoute, Router} from '@angular/router'; 
import { Store } from '@ngrx/store'; 

import { Observable } from 'rxjs/Observable'; 

import {Post} from "../../common/models/post.model"; 

import * as fromRoot from '../../common/reducers'; 
import * as post from '../../common/actions/posts.actions'; 

@Component({ 
    selector: 'wie-edit-post', 
    templateUrl: "./edit-post.component.html", 
    styleUrls: ['./edit-post.component.html'] 
}) 
export class EditPostComponent { 

    public post: Observable<Post>; 

    constructor(private route: ActivatedRoute, private router: Router, private store: Store<fromRoot.State>) { 

     this.route.params.subscribe((params) => { 
      this.post = this.store.select(fromRoot.getSelectedPost).filter((storePost) => (storePost && storePost.id == parseInt(params.id, 10))).map((storePost) => {console.log(storePost); return storePost; }); 
      this.store.dispatch(new post.LoadPostAction((parseInt(params.id, 10)))); 
     }) 
    } 


} 

内部コンポーネントHTMLは次のようになります

<md-card> 
    <md-card-header> 
     <md-card-title> 
      <h1>Edit Post</h1> 
     </md-card-title> 
    </md-card-header> 
    <md-card-content> 
     <md-input-container> 
      <textarea [(ngModel)]="post.content" mdInput placeholders="Prank"></textarea> 
     </md-input-container> 
    </md-card-content> 
    <md-card-actions> 
     <button md-raised-button>Cancel</button> 
     <button color="accent" md-raised-button>Edit</button> 
    </md-card-actions> 
</md-card> 

内側のコンポーネントタイプスクリプトは次のようになります：

store.select文で

import { Component, Input, OnInit } from '@angular/core'; 
import {Post} from "../../common/models/post.model"; 

@Component({ 
    selector: 'wie-edit-post-form', 
    templateUrl: './edit-post-from.component.html' 
}) 
export class EditPostFormComponent implements OnInit { 

    @Input()post: Post; 

    ngOnInit() { 
     console.log(this.post); 
    } 
} 

外側のコンポーネントのにconsole.logは正しくコンソールにポストを印刷しますがngOnInit関数の内部コンポーネントのにconsole.logステートメントは、それが定義されていないと言うので、ストアが正しくLoadPostAction派遣されますサーバーからポストをフェッチするが、内部コンポーネントでは、post.contentが定義されておらず、ポスト・コンテンツがフォームに表示されないというエラーが発生し続ける。

ご協力いただければ幸いです。ありがとう

Answer 1

だから、それは何か愚かだった、私は実際にコンポーネントにポストを渡していませんでした。私は$ngIF="post | async; else loading"でしたが、私は持っていませんでした。[post]="post | async"