javascript - Update on datachange on Angular 6

Question

I have an array with 15 responses when the 15 requests ends. I want to update the view when a new response is added to the array without refreshing the page.

    loadItem(res: DashboardInfo[]): void {
    this.item.push([]); // ERROR
    this.item.push([]); // WARNING
    this.item.push([]); // INFORMATION
    this.item.push([]); // OK
    let element;
    while ((element = res.pop())) {
        let index: number;
        if (element.level === "ERROR") index = 0;
        else if (element.level === "WARNING") index = 1;
        else if (element.level === "INFORMATION") index = 2;
        else index = 3;
        if (element.path !== undefined) {
            if (this.featuresFlag.visibleFeatures.includes(element.path)) {
                this.item[index].push(element);
                this.item = this.item.slice();
            }
        }

    }
}

Answer 1

@pascalpuetz has the right answer. Here's a more more specific example though:

If a card would have this interface:

interface Card {
  id: string; // a value that uniquely identifies a card
  type: 'error' | 'success' | 'warning';
  message: string;
  delay: number;
}

You could track them by a unique property of the Card object like the id.

trackCardsById(index: number, card: Card) {
  return card.id;
}

<div *ngFor="let card of cards; trackBy:trackCardsById " class="card" [ngClass]="card.type">
  {{card.message}}
</div>

Or you could track them by their position in the list:

trackCardsByIndex(index: number, card: Card) {
  return index;
}

<div *ngFor="let card of cards; trackBy:trackCardsByIndex " class="card" [ngClass]="card.type">
  {{card.message}}
</div>

You can see a working example here.