0

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

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

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

问题

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

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

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

重要的

我知道trackBy，但我不明白如何应用它来解决这个问题，并且在互联网上看不到与此相关的问题。

谢谢。

4

1 回答 1

0

我能够解决这个问题。

  • 背景

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

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

  • 解决方案

应该有一个单独的 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)将返回一个显示日期的字符串，例如：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中要删除的日期的正确索引。一旦找到，该特定日期对象的属性将设置为。datesgetArrayIndex()dateaction"deleted"

于 2020-08-15T01:31:26.593 回答