Question

我现在正在玩Angular 6。

所以我拥有的是我想通过ngFor显示的对象数组。从html页面，我可以执行2种不同的操作-向该数组添加一个新项目，并从该数组中删除一个项目。

发生的事情是，有时添加新项目会导致现有项目从视图表示中消失。

更确切地说，当发生这种情况时，我有一个场景（随附的屏幕快照中也有描述）：

添加几个项目，所以我在一个数组中总共有5个项目，其显示值为“ a”，“ b”，“ c”，“ d”，null
删除项目“ c”，然后删除项目“ b”（现在我有“ a”，“ d”，null）
设置最后一项的值（现在我有“ a”，“ b”，“ e”）
添加新项目。这是一个问题开始的地方。项目已添加到数组，但与此同时，值“ d”也停止显示。现在，很奇怪的是，值“ d”实际上仍在模型中（屏幕快照上的最后一个日志），但它并未显示。

说实话，甚至不确定如何开始调试它。

添加新的商品代码：

  addItem () {
    var newItem = new CardItem(String(++this.itemCount), null);
    console.log("Created new item: "+JSON.stringify(newItem));

    this.testCard.back.push(newItem);
    console.log("Items after adding new option: "+JSON.stringify(this.testCard.back));
  }

删除商品代码：

  removeAnswer (itemIndex: string) { 
    if (itemIndex!=null) {
      var index = this.testCard.back.findIndex(answ => answ.id == itemIndex);
      console.log("Index of item to be removed: ["+index+"]. Object to be removed: ["+JSON.stringify(this.testCard.back[index])+"]");

      this.testCard.back.splice(index,1);
      console.log("Item after removal: "+JSON.stringify(this.testCard.back));
    } else {
      console.debug("Can't remove item, index is missed. ["+itemIndex+"].");
    }
  }

    <mat-form-field *ngFor="let cardBack of testCard.back; let i = index; let first = first; let last = last">
      <input matInput placeholder="Item {{i+1}}" name="item{{i+1}}" [(ngModel)]="cardBack.item" >
      <mat-icon matSuffix (click)="removeItem(cardBack.id)">close</mat-icon>
    </mat-form-field>

提前感谢大家！

已添加

我通过在NgFor中添加trackBy（作为答案添加）来解决了一个问题。但是，我不明白为什么它在一种情况下有效，而在另一种情况下无效。

所以我尝试实现trackBy函数。一个有效的方法只是返回传递给该函数的索引值。无效的实现使用了唯一的back.id值，但是以某种方式无效。我认为对于trackBy函数，我们需要一个不会更改的唯一标识符，这就是为什么我尝试使用back.id的原因-它仅生成一次，此后不会更改。另一方面，在我们从NgFor添加/删除项目后，$ index值将每次更改，因此同一项目将通过不同的ID（仍然是唯一的）进行跟踪。

因此，在两种情况下，函数都会返回唯一值。为什么在$index函数中使用trackBy时它可以工作，但是当我尝试使用作为对象一部分的唯一标识符（back.id）时却不起作用？ / p>

Answer 1

通过向trackBy添加ngFor函数来解决此问题，该函数按索引跟踪项目。所以基本上我替换了下一个代码：

<mat-form-field *ngFor="let cardBack of testCard.back; let i = index; let first = first; let last = last">

具有：

<mat-form-field *ngFor="let cardBack of testCard.back; let i = index; trackBy: trackBackBy">

其中的trackBackBy函数如下所示：

trackBackBy (index, back) {
    return index;
}

尽管没有答案，但是为什么添加新元素会使第二个元素的值消失（属性ng-reflect-model的值实际上一直都是正确的）。至少在此感谢您的帮助。

我也尝试在back.id函数中使用trackBackBy，但是它不起作用。我以为，对于trackBy函数，我们需要一些不会更改的对象标识符，因此这就是我尝试使用back.id的原因-它仅生成一次，此后不会更改。另一方面，在我们从NgFor $index添加/删除项目之后，值每次都会更改，因此同一项目将通过不同的ID进行跟踪（仍然是唯一的）。

因此，在两种情况下，函数都会返回唯一值。为什么在trackBy函数中使用$ index时它为什么起作用，但是当我尝试使用作为对象一部分的唯一标识符（back.id）时却不起作用？

为什么在编辑ngFor使用的源之后，某些数据仍未显示？

1 个答案: