Removing a row will always result in the deletion of the final row, as the index is returned as

Question

Removing a row will always result in the deletion of the final row, as the index is returned as

In my Angular application, I have a Reactive Form with a feature that allows users to add or remove rows. Each row has its own delete button. However, there is an issue where clicking on the delete button for a specific item results in the last row being removed instead. Upon debugging, I noticed that the index returned is -1, indicating that the last item will be deleted.

delete_communityList_row(id) {
  const index = this.Form.value.communityList.indexOf(id);
  this.Form.value.communityList.splice(index, 1);
}

Despite the delete button correctly returning the "id" of the clicked row, I am unsure why the deletion is not working as expected. The console.log output shows an array of objects.

https://i.sstatic.net/gDs1E.png

angular typescript

Answer 1

Answer №1

Within your code, the communityList property contains a collection of objects and you are attempting to check for the index of an id (likely a string or number) that is not present in the array as an element (it is a property value of the object), resulting in it always returning -1. According to the documentation on Array#splice, if the start value is negative, it counts from the end, such as array.length - n (-1 represents the last index).

You can obtain the index by checking the property value using the Array#findIndex method, which iterates through the array and returns the index when the callback function evaluates to true.

const index = this.Form.value.communityList.findIndex(o => o.id === id);

Updated code:

delete_communityList_row(id) {
  const index = this.Form.value.communityList.findIndex(o => o.id === id);
  if(index !== -1) this.Form.value.communityList.splice(index, 1);
}

Note: If you are calling this method from the template (generated using *ngFor), consider passing the index instead of the id for simplicity.

Answer 2

Within your code, the communityList property contains a collection of objects and you are attempting to check for the index of an id (likely a string or number) that is not present in the array as an element (it is a property value of the object), resulting in it always returning -1. According to the documentation on Array#splice, if the start value is negative, it counts from the end, such as array.length - n (-1 represents the last index).

You can obtain the index by checking the property value using the Array#findIndex method, which iterates through the array and returns the index when the callback function evaluates to true.

const index = this.Form.value.communityList.findIndex(o => o.id === id);

Updated code:

delete_communityList_row(id) {
  const index = this.Form.value.communityList.findIndex(o => o.id === id);
  if(index !== -1) this.Form.value.communityList.splice(index, 1);
}

Note: If you are calling this method from the template (generated using *ngFor), consider passing the index instead of the id for simplicity.

Removing a row will always result in the deletion of the final row, as the index is returned as

Answer №1

Similar questions

Best practice for encapsulating property expressions in Angular templates

Navigating through child routes in Angular can be tricky, especially when dealing with unknown routes

Searching through an array of objects with ng2-completer does not yield any search results

Uncovered requirement for the selectSignal in an isolated module

What is the best way to create a TypeScript function that merges actions together?

custom tooltip for ngx-charts

Refreshing a page in Angular 2 using webpack may sometimes lead to the index.html file loading without any styling or

Issue with IE11 compatibility in Angular2 (AngularQuickStart version 2.4.0) due to syntax error

Revising Global Variables and States in React

The NestJS Service/Validator encounters a TypeError when trying to access properties of undefined, specifically when attempting to read 'get'. This error occurs when the injected objects are not available for use within

Differences between Strings and Constants in React While Using Redux for Action Types

What could be causing the Timeout error to occur in my Jasmine unit test for the HTTP interceptor?

How to use CSS to add a pseudo element to a table and position it outside of the parent's boundaries on the left

Universal NestJS GraphQL Guard

Utilizing Angular's Dynamic Component Import and Loading capabilities

What is the reason behind the return type of 'MyType | undefined' for Array<MyType>.find(...) method?

Arithmetic operations cannot be performed on the values generated by an observable interval

Is there a way to retrieve the type of a generic class in JavaScript?

What is the best way to determine the width and height of text within a TextArea using JavaScript in an HTML document

Bring in Event Types from React using TypeScript