angular - 无法读取未定义的属性 'title'，但显示标题

Question

我是 angular 4 的新手，我正在尝试构建我的第一个应用程序。

标题显示在屏幕上，但在控制台中出现此错误:

这是 html 文件中的第 26 行:

<h1>{{result.title}}</h1>

这是TravelDetailComponent:

export class TravelDetailComponent implements OnInit {

result: string[];
id: number;

constructor(private http: Http, private globals: Globals, private activatedRoute: ActivatedRoute) {
}


ngOnInit() {
  this.activatedRoute.params.subscribe((params: Params) => {
      this.id = params['id'];
      console.log(this.id);
  });
  this.http.get(this.globals.baseUrl + 'travels/' + this.id)
      .map(res => res.json()).subscribe(result => this.result = 
result);
}

}

为什么标题显示在屏幕上，但我在控制台 中收到此错误，我该如何解决？

Answer 1

除非您熟悉 Angular Template Syntax，否则您会遇到这个问题。 .特别是 *ngIf 和 elvis 运算符 ? 的使用。

例如，如果您只想显示标题，您可以执行以下操作以确保页面在有标题之前不会尝试呈现标题。

<h1 *ngIf="title">{{ title }}</h1>

此外，如果您有一个带有属性的对象，您可以放弃 *ngIf 并检查以确保该对象已解析。例如，假设您将页面的所有数据保存到 page 对象中，并且像上面一样，想要显示标题。

<h1>{{ page?.title }}</h1>

如果你想要真正安全，你仍然可以将它包装在一个专门检查标题的 *ngIf 语句中，但通常如果你在页面对象中有数据，可以安全地假设有里面有一个标题。