Обновление данных на Angular 6 - PullRequest
Новая
       7

Обновление данных на Angular 6

0 голосов
/ 25 октября 2018

На самом деле у меня есть массив с 15 ответами, когда 15 запросов заканчиваются.Все, что я хочу сделать, это обновить представление при добавлении нового ответа в массив без обновления страницы.

Если у вас есть пример, это будет очень полезно для меня. 

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

    }
}

Спасибо:)

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

@ pascalpuetz имеет правильный ответ.Вот более конкретный пример:

Если бы карта имела такой интерфейс: 

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

Вы можете отслеживать их по уникальному свойству объекта Карта , напримеридентификатор. 

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

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

Или вы можете отследить их по их позиции в списке: 

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

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

Вы можете увидеть рабочий пример здесь .

0 голосов
/ 25 октября 2018

Используйте атрибут * ngFor trackBy в вашем шаблоне.

<div *ngFor="let i of items; trackBy: trackByFn"></div>

и на вашем component.ts 

trackByFn(index, item) {
  return index; // or item.id
}

Хороший пример вы можете найти здесь: https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

...