Question

现在{{article。}}属性都可以正常运行并显示它们在网页中的内容，为什么在网页输入时，article.com（在html底部）说文章是未定义的？谢谢。

Aricle.cs模型从'./comment'导入{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>

视图可能在初始化之前尝试访问article属性。

Answer 2

您的组件app-comment-tree在哪里？问题是该自定义组件中未定义article。您必须从该组件导入该类，并在模板ArticleFullPageComponent.article.comments中将其作为articlefullpage.component.html进行访问（如果它被定义为公共属性）。

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

希望它有所帮助。

angular 2无法读取未定义的属性“注释”

2 个答案: