javascript - 配列が埋まった後にページを読み込む方法は？

私は「detail」という名前のコンポーネントを持つAngularアプリを持っています。

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>

これは機能します。アイテムのプロパティが表示されます。問題は、コンソールに多くのエラーメッセージが表示されることです。メッセージは次のようになります:

オブジェクト.eval [as updateRenderer] で undefined のプロパティ 'name' を読み取ることができません

getData() 関数が完了して配列が埋まる前に、item.name をレンダリングして表示しようとしているようです。

コンソールにもうエラーメッセージが表示されないように、これを解決する方法がわかりますか？

回答 #1

これを使ってください

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

または

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

回答 #2

UIに表示する前にチェックを追加してみてください。

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

そして、item に値があるまで item.name は評価されません。