组件输入的值未定义在角度

我想从一个组件传递一个帖子到另一个组件有一个编辑窗体。外部组件获取帖子并传递给内部组件进行编辑，但由于某种原因，它不通过，所以我得到一堆未定义的错误。组件输入的值未定义在角度

外部构件的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

组件输入的值未定义在角度

回答

相关问题