angular 2无法读取undefined的属性'comments'

Question

现在{{article。}}属性全部正常工作并显示它们在网页中的内容，为什么article.comments（在html的底部）说文章是undefined什么时候是页面输入？谢谢。

Aricle.cs model import'Comment} from'./comment';

export class Article { 
    id : number; 
    isanon : boolean; 
    title: string; 
    link: string; 
    text: string; 
    subverse : string; 
    userID : string; 
    votes: number; 
    comments : Comment[]; 

    constructor(title: string, link: string, subverse : string, text : string, userID : string, votes?: number) { 
    this.title = title; 
    this.link = link; 
    this.text = text; 
    this.subverse = subverse; 
    this.userID = userID; 
    this.votes = votes || 0; 
    this.comments = new Array<Comment>(); 
    } 

    log() : void{ 
    console.log("Title: " + this.title + " Link: " + this.link + " subverse: " + this.subverse); 
    } 

    domain(): string { 
    try { 
     return this.link; 
    } catch (err) { 
     return null; 
    } 
    } 

    voteUp(): void { 
    this.votes += 1; 
    } 

    voteDown(): void { 
    this.votes -= 1; 
    } 


} 

articlefullpage.component.html

<div class="ui large segment"> 
<div class="field"> 
    Article Title: {{article.title}} 
</div> 
<div class="field"> 
    Article Link: <a href="{{article.link}}">{{article.link}}</a> 
</div> 
<div class="field"> 
    User Text: {{article.text}} 
</div> 
<div class="field"> 
    Subverse: {{article.subverse}} 
</div> 
<div class="field"> 
    Votes: {{article.votes}} 
</div> 
</div> 
<br/><br/> 

<div class="ui large segment"> 
Add comment 
<form class="form ui large segment"> 
<textarea rows="10" cols="10" #comment> 

</textarea> 
    <!-- added this button --> 
    <button (click)="addComment(comment)" 
      class="ui positive right floated button"> 
    Submit link 
    </button> 
</form> 
</div> 

<app-comment-tree [commentTree]="article.comments"></app-comment-tree> 

articlefullpage.component.ts

import { 
    Component, 
    OnInit, 
    Input 
} from '@angular/core'; 
import { Article } from '../models/article'; 
import {Location} from '@angular/common'; 
import {AppServiceHackersPulse} from '../services/app.service.hackerspulse'; 
import {User} from '../models/user'; 
import {Comment} from '../models/comment'; 

@Component({ 
    selector: 'app-articlefullpage', 
    templateUrl: './app/articlefullpage/articlefullpage.component.html', 
    styleUrls: ['./app/articlefullpage/articlefullpage.component.css'], 
    host: { 
    class: 'row' 
    }, 
    providers: [AppServiceHackersPulse] 
}) 
export class ArticleFullPageComponent implements OnInit { 
    @Input() article : Article; 
    service : AppServiceHackersPulse; 
    user : User; 
    Id : string; 

    constructor(private location : Location, private hpService: AppServiceHackersPulse) 
    { 
    this.service = hpService; 
    this.Id = location.path().split('/')[2]; 

    this.service.GetUser().subscribe((data) => { 
     this.user = data; 
    }); 
    } 

    ngOnInit() { 


    } 

    getArticle() : Article 
    { 
    return this.article; 
    } 

    addComment(comment : HTMLInputElement) 
    { 
    var c : Comment = new Comment(0,0,this.user.id,comment.value,Number(this.Id)); 
    this.article.comments.push(c); 
    console.log("comment: " + comment.value); 
    } 

} 

完整的错误

core.umd.js:2837EXCEPTION: Uncaught (in promise): Error: Error in app/articlefullpage/articlefullpage.component.html:33:18 caused by: Cannot read property 'comments' of undefined 
TypeError: Cannot read property 'comments' of undefined 
    at CompiledTemplate. 

Answer 1

第一个停靠港是把一个* ngIf上违规标签：

<app-comment-tree *ngIf="article" [commentTree]="article.comments"></app-comment-tree> 

该视图可能试图访问文章属性之前它已被初始化。

Answer 2

你的组件在哪里app-comment-tree？问题在于article未在该自定义组件中定义。 如果它被定义为公共属性，则必须从该组件导入类并在模板articlefullpage.component.html中像ArticleFullPageComponent.article.comments那样访问它。

或者您可以在您未发布的自定义组件中定义它。

希望它有帮助。