組件輸入的值未定義在角度

我想從一個組件傳遞一個帖子到另一個組件有一個編輯窗體。外部組件獲取帖子並傳遞給內部組件進行編輯，但由於某種原因，它不通過，所以我得到一堆未定義的錯誤。組件輸入的值未定義在角度

外部構件的HTML看起來像這樣：

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

外部構件打字稿看起來像這樣：

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>

的內部組件打字稿看起來像這樣：

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); 
    } 
}

外部組件在store.select聲明的console.log正確打印後到控制檯，但內部組件的ngOnInit功能的console.log聲明說，這是不確定的，所以店裏正確地分派LoadPostAction並從服務器獲取帖子，但在內部組件中，我不斷收到post.content沒有定義的錯誤，並且帖子內容從未出現在表單中。

任何幫助，將不勝感激。謝謝

來源

2017-08-07 Beamer180

我不認爲'Observable.content'被定義。 –

所以......這是愚蠢的，我並沒有真正將帖子傳遞到組件。我有一個$ngIF="post | async; else loading"，但我沒有[post]="post | async"

來源

2017-08-07 03:38:49 Beamer180

組件輸入的值未定義在角度

回答

相關問題