Angular 6 上的数据更改更新 [英] Update on datachange on Angular 6

问题描述

当 15 个请求结束时，我有一个包含 15 个响应的数组.我想在不刷新页面的情况下将新响应添加到数组时更新视图.

 loadItem(res: DashboardInfo[]): void {this.item.push([]);//错误this.item.push([]);//警告this.item.push([]);//信息this.item.push([]);//好的让元素；而 ((元素 = res.pop())) {让索引:数字；if (element.level === "ERROR") index = 0;else if (element.level === "WARNING") index = 1;else if (element.level === "INFORMATION") index = 2;否则索引 = 3;if (element.path !== undefined) {if (this.featuresFlag.visibleFeatures.includes(element.path)) {this.item[index].push(element);this.item = this.item.slice();}}}}

解决方案

@pascalpuetz 有正确的答案.不过，这里有一个更具体的例子:

如果卡片有这个接口:

interface Card {id:字符串；//唯一标识卡片的值类型:'错误' |'成功' |'警告';消息:字符串；延迟:数量；}

您可以通过 Card 对象的唯一属性(如 id)来跟踪它们.

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

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

或者您可以通过它们在列表中的位置来跟踪它们:

trackCardsByIndex(index: number, card: Card) {回报指数；}

{{card.message}}

您可以在此处查看工作示例.

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

    }
}

解决方案

@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.

这篇关于Angular 6 上的数据更改更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！