ngForOf 中的重复 ID 生成 - Angular

Question

我正在使用 ngForOf 列出日期，每个日期由 id 属性表示，这实际上是它的索引 + 1。所有日期都以数组中对象的形式存在。此外，每个日期都是一个组件实例。

ngForOf 的问题在于，每当我从列表中删除一个日期时，整个 DOM 都会刷新并且 ID 会重新分配。

<app-date *ngFor="let date of dates | callback: filterDates; index as i" (delete)="del(i)"></app-date>

问题

现在当我说“删除”时，我不是 splicing/removing 数组中的日期，而是将日期的 action 属性设置为 "deleted"。这样我就不必为每个日期都发出 HTTP 请求以将其从数据库中删除。

一旦 action 为 "deleted"，日期就不会出现在 DOM 中，但仍会出现在数组中。所以下次 DOM 刷新时，它将重新分配 ID，现在我将在数组中有重复的 ID。这有很多后果，最大的一个是我无法删除具有相同 ID 的日期。

我还尝试更改每个删除事件的日期 ID，但这也弄乱了数组。

重要

我知道 trackBy，但我不明白如何应用它来解决这个问题，也没有在 Internet 上看到与此相关的问题。

谢谢。

Answer 1

我能够解决问题。

背景

基本上有两个数组，一个是 dates 数组，我通过它遍历以呈现日期，另一个数组包含代表每个日期的 DOM 元素显示在屏幕上。 Angular 不关心 id 或日期在 component.ts 文件中的 dates 数组中的索引。默认情况下，它通过 DOM 数组中的索引跟踪 ngFor 循环中的每个元素。对于发生的每个 add/remove 操作，此数组都会不断变化。

我犯的错误是我使用了DOM数组索引作为日期的id。现在由于删除了任何日期，DOM 数组正在刷新，并且由于我从未真正从数组中删除或拼接日期，所以数组中总是有一些重复的 id。

解决方案

应该有一个单独的 ID 生成函数，或者可能只是一个数字类型属性，在每个 pushDate() 操作中保持递增。这将在一定程度上解决 id 重复的问题。虽然，Angular 仍然不关心 id，它只能通过其在 DOM 数组中的索引来识别每个日期元素，因此，为了删除一个特定的日期，您需要它DOM 数组中的索引。

<app-date *ngFor="let date of dates | callback: filterDates; index as i" [id]="dateID" (delete)="del(i, $event)"></app-date>

现在，(delete) 将 return 显示日期的字符串，例如：2020-8-15。该日期以及该特定日期的 action 属性将标识要设置为 deleted 的日期。这是我的做法：

getArrayIndex = (index: number, date: string): number => {
    for (let i = 0; i < this.dates.length; i++) {
        if(i == index && date == this.dates[i]['date']) {
            if(this.dates[i]['action'] == 'deleted') {
                return this.getArrayIndex(i + 1, date);
            }
            else {
                return i;
            }
        }
        else if(i == index && date != this.dates[i]['date']) {
            return this.getArrayIndex(i + 1, date);
        }
        else if(i != index) {
            continue;
        }
        else {
            return i;
        }
    }
}

del = (num: number, event: string) => {
    let i = this.getArrayIndex(num, event);
    this.dates[i]['action'] = 'deleted';
}

del函数首先通过getArrayIndex()在dates数组中找到要删除的日期的正确索引。找到 date 后，该特定日期对象的 action 属性将设置为 "deleted".

ngForOf 中的重复 ID 生成 - Angular

Duplicate ID generation in ngForOf - Angular

angular

typescript

ngfor

angular10