无法读取未定义的属性“标题”，但会显示标题

Question

我是角度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，否则您将以角度遇到此A TON。特别是使用*ngIf和elvis运算符?。

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

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

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

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

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

Answer 2

您需要在HTML中添加 safe operator 以检查该值是否存在，如果该值不存在，这将避免上述错误

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