Question

我有一个有角度的应用程序，其组件名为“详细信息”。

在detail.component.ts中，我从API提取数据并将其填充到一个数组中，然后过滤该数组中的某个项目并将其放入另一个数组中。这是缩短的代码：

import { HttpClient } from '@angular/common/http';
//code
public data: any = []
public item: any = []
//code
constructor(public http: HttpClient) { }
getData()
{
const url ='myUrl'
this.http.get(url).subscribe(data => {this.data = data; this.item=this.data.find(/*my search*/)})
}
//code
ngOnInit()
  {
    this.getData()
  }

然后，使用文件“ detail.component.html”显示所选商品的属性，如下所示：

<div><span>Name: </span>{{item.name}}</div>

这有效，显示项目属性。问题是，在控制台中会出现很多错误消息。他们是这样的：

无法读取Object.eval上未定义的属性“名称”（作为updateRenderer）

似乎在完成getData（）函数并填充数组之前，它试图呈现和显示item.name。

您是否知道如何解决此问题，以便控制台中不再显示错误消息？

Answer 1

只需使用此

<div><span>Name: </span>{{item?.name}}</div>

OR

<div *ngIf="item"><span>Name: </span>{{item.name}}</div>

Answer 2

尝试在用户界面中显示支票之前先添加支票。

<div *ngIf="item"><span>Name: </span>{{item.name}}</div>

因此，item.name直到item中有值时才被评估。

Answer 3

由于错误是不言自明的，因此它甚至试图在数据可用之前渲染视图。您可以添加防御条件来解决此问题。类似于* ngIf =“ item && item.name”。希望对您有帮助！

Answer 4

您还可以像这样使用安全导航操作符?：

<div><span>Name: </span>{{item?.name}}</div>

Answer 5

使用解析。 Angular Documentation For Resolve

Example Of an Resolve

数组填充后如何加载页面？

5 个答案: