Angular 2 ngOnInit 被错误调用两次

Question

我在 Angular 2 中遇到了一个奇怪的错误。我有两个具有相似模板和相似服务的相似组件。以下是它们工作原理的基础知识:

组件:

theData: any;

constructor(private _theService: TheService) {}

ngOnInit() {
    this._theService.getData()
        .subscribe(data => {
            this.theData = data;
        });
}

服务:

private _url = "http://url.net/api/Data";

constructor(private _http: Http) {
}

getData() {
    return this._http.get(this._url)
        .map(res => res.json());
}

这会返回一个对象数组，例如:

[
    {name: "Name 1"},
    {name: "Name 2"}
]

模板将它们显示为:

<div *ngFor="let item of theData">{{ item.name }}</div>

然后你可以点击一个项目，你会被带到一个页面，该页面遵循与上面相同的策略，除了服务/api 只返回一个对象并且模板不使用 *ngFor 因为只有一个项目可以显示。

所以它看起来像:

theItem = {name: "Name 1"} // what the service returns

<div>{{ theItem.name }}</div>

显示所有项目时，一切都很好，但是当我单击单个项目时，OnInit 被调用两次，我在 platform-b​​rowser.umd.js 中收到错误，这实际上是模板中的错误，因为它说无法读取 undefined(即 theItem)的属性 name。

我通过将单个项目的模板更改为:

解决了这个问题

<div>{{ theItem?.name }}</div>

起初我认为问题是在从服务加载数据之前模板正在呈现，所以添加 ? 修复了它。但是模板不应该在 ngOnInit 完成后加载吗？我的问题是，为什么添加 ? 可以解决这个问题，即使我在第一个模板中加载所有项目时不需要它？

谢谢。

Answer 1

因为 get 是异步的，它实际上在加载数据之前开始呈现模板。它将触发服务调用并且不会等待，它将继续处理。添加 ? 允许它成为 undefined，然后在加载数据后适本地呈现。