javascript - Kuinka ladata sivu, kun taulukko on täytetty?

Minulla on Angular-sovellus, jossa on komponentti nimeltä "detail".

detail.component.ts-tiedostossa haen tietoja API:sta ja täytän ne taulukkoon, sitten suodatan taulukosta tietyn kohteen ja laitan tämän kohteen toiseen taulukkoon. Tässä on lyhennetty koodi:

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()
  }

Sitten näytän valitun kohteen ominaisuudet tiedostolla "detail.component.html" näin:

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

Tämä toimii, kohteen ominaisuudet näytetään. Ongelma on, että konsolissa näkyy paljon VIRHE-viestejä. Ne menevät näin:

Ei voi lukea määrittelemättömän kohteen ominaisuutta 'name' kohdassa Object.eval [päivitäRendererina]

Näyttää siltä, että se yrittää renderöidä ja näyttää item.namen ennen kuin funktio getData() on valmis ja taulukko on täytetty.

Onko sinulla mitään käsitystä siitä, miten ratkaista tämä niin, että konsoliin ei enää tule virheilmoituksia?

Vastaus #1

Käytä vain tätä

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

TAI

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

Vastaus #2

Yritä lisätä tarkistus ennen sen näyttämistä käyttöliittymässä.

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

Ja niin item.name ei arvioidu ennen kuin item:ssä on arvo.