ngForOf中的重复ID生成-Angular

问题描述

我正在使用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请求来将其从数据库中删除。

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

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

重要

我知道trackBy，但是我不知道如何应用它来解决此问题，也没有在互联网上看到与此相关的问题。

谢谢。

解决方法

我能够解决问题。

• 背景

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

我犯的错误是我将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)将返回一个显示日期的字符串，例如：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函数首先通过dates在getArrayIndex()数组中找到要删除的日期的正确索引。找到date后，该特定日期对象的action属性将设置为"deleted"。