Generating duplicate IDs in ngForOf loop in Angular

Question

Generating duplicate IDs in ngForOf loop in Angular

My current setup uses ngForOf to display dates, with each date having an id property which is basically its index + 1. These dates are stored as objects in an array and each date is represented by a component instance.

The issue I am facing with ngForOf is that whenever I remove a date from the list, the entire DOM refreshes and new IDs are reassigned.

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

The Dilemma

When I use the "delete" function, I do not actually splice/remove the date from the array; instead, I set the action property of the date to "deleted". This saves me from making HTTP requests to delete each date from the backend database.

Once the action is set to "deleted", the date disappears from the DOM but remains in the array. Therefore, during the next DOM refresh, new IDs are assigned leading to duplicate IDs in the array. This causes issues such as the inability to delete dates with the same ID.

I did attempt to update the ID of the date on every deletion event, but this also caused problems within the array.

Key Point

While I have some knowledge about trackBy, I am unsure how to implement it to resolve this particular issue. My search for similar problems online has been unsuccessful so far.

Thank you.

angular typescript ngfor angular10

Answer 1

Answer №1

I managed to successfully resolve the issue at hand.

Scenario

The situation involved dealing with two arrays: one being the dates array used for rendering dates, and the other array containing the DOM elements representing each date displayed on the screen. In Angular, the framework does not consider the id or index assigned to each date in the dates array within the component.ts file. Instead, it tracks individual elements in the ngFor loop based on their index within the DOM array. As a result, this DOM array undergoes changes during add/remove operations.

The error I encountered was using the index of the DOM array as the id for the date. This led to duplications in the id values within the array whenever dates were removed without actually deleting or splicing them from the array.

Resolution

To address this issue, it is advisable to implement a separate function for generating unique IDs or simply utilize a property that increments with each pushDate() operation. While this may mitigate the problem of duplicate ids to some extent, Angular's reliance on the index within the DOM array remains unchanged. Therefore, to delete a specific date, it is essential to know its index within the DOM array.

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

Subsequently, the (delete) function will provide a string indicating the date to be deleted, such as 2020-8-15. This date, coupled with the action attribute of the respective date, facilitates the identification of the designated date for deletion using the following approach:

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';
}

In essence, the del function locates the correct index of the specified date within the dates array using getArrayIndex(), subsequently marking the action property of that particular date object as "deleted".

Answer 2

I managed to successfully resolve the issue at hand.

Scenario

The situation involved dealing with two arrays: one being the dates array used for rendering dates, and the other array containing the DOM elements representing each date displayed on the screen. In Angular, the framework does not consider the id or index assigned to each date in the dates array within the component.ts file. Instead, it tracks individual elements in the ngFor loop based on their index within the DOM array. As a result, this DOM array undergoes changes during add/remove operations.

The error I encountered was using the index of the DOM array as the id for the date. This led to duplications in the id values within the array whenever dates were removed without actually deleting or splicing them from the array.

Resolution

To address this issue, it is advisable to implement a separate function for generating unique IDs or simply utilize a property that increments with each pushDate() operation. While this may mitigate the problem of duplicate ids to some extent, Angular's reliance on the index within the DOM array remains unchanged. Therefore, to delete a specific date, it is essential to know its index within the DOM array.

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

Subsequently, the (delete) function will provide a string indicating the date to be deleted, such as 2020-8-15. This date, coupled with the action attribute of the respective date, facilitates the identification of the designated date for deletion using the following approach:

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';
}

In essence, the del function locates the correct index of the specified date within the dates array using getArrayIndex(), subsequently marking the action property of that particular date object as "deleted".

Generating duplicate IDs in ngForOf loop in Angular

Answer №1

Similar questions

Encountered "Function undefined error when invoking within a map in TypeScript"

Issue encountered when trying to redirect after user creation on the backend

Removing the outer array of objects can be achieved by using a variety of

Tips for showcasing information from a nested array and modifying data in an Angular application

reconfigure components by resetting settings on a different component

What is the importance of having a reference path for compiling an AngularJS 2 project using gulp-typescript?

Embracing the "export ... from" feature in the TypeScript compiler

Oops! The program encountered an issue where it was unable to access the properties of an undefined variable, specifically while trying to

One potential solution for fixing the error in GetRepository of TypeORM is to check for undefined properties before attempting to access them. This error typically occurs when trying to read properties of an undefined

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

Angular version 2 has a directive called "ng2-nvd3" which seems to be undefined

Having trouble resolving modules after generating tsconfig.json?

The command "tsc" was not found in this bash session

Implementing a custom type within a generic function

Icon appearing outside the button instead of inside

NgRx Action Payload fails to trigger Effect, but no error messages are generated

Using Angular2's NgFor Directive in Components

Accessing Promise.all in the rejection function is not allowed

What's with all the requests for loaders on every single route?

Creating a type declaration for an object by merging an Array of objects using Typescript