Delete information based on its unique identifier

Question

Delete information based on its unique identifier

Currently, I am trying to remove data from a list but encountering a small issue with the following code.

Component Code

removeSelectedRows(){
    console.log(this.selection.selected.map(item => item.userId))
    const selectedRowIds = this.selection.selected.map(item => item.userId);
       console.log(selectedRowIds)
      this.UserService.deleteUser(selectedRowIds).subscribe(res =>{
        this.dataSource.data = this.dataSource.data.filter(data => data.userId !== selectedRowIds);
      }, err =>{
        console.error(err);  
      }, ()=>{
        // this.clearUserForm();
        this.loadUsers(this.pageIndex);
      });
  }

The error arises from this section of the code

this.UserService.deleteUser(selectedRowIds).subscribe(res =>{
            this.dataSource.data = this.dataSource.data.filter(data => data.userId !== selectedRowIds)

.

selectRowIds causing an error

Argument of type 'string[]' is not assignable to parameter of type 'string'

angular typescript

Answer 1

Answer №1

selectedRowIds is actually an array, so comparing a string with an array of strings wouldn't work. You might want to consider using the Array.includes() method instead.

this.dataSource.data.filter(data => !selectedRowIds.includes(data.userId))

I hope this explanation clarifies things for you.

Update

This is based on an assumption since the actual workings of the deleteUser method are unknown. It appears that the service's method expects a single user ID. Therefore, you may need to either iterate over the selected IDs or modify the service method to handle an array of IDs. However, be cautious as making multiple separate API calls can lead to unexpected results.

selectedRowIds.forEach((selectedID) => {

    this.UserService.deleteUser(selectedID).subscribe(res =>{
    //                            ^^ Only one ID is passed here

        this.dataSource.data = this.dataSource.data.filter(data => data.userId !== selectedID);
    //                                                                 ^^^^^^^^^^^^^^^^ Filtering by selectedID
      }, err =>{
        console.error(err);  
      }, ()=>{
        // this.clearUserForm();
        this.loadUsers(this.pageIndex);
      }
    );
});

However, I do not recommend this approach due to potential multiple API calls being made (if applicable).

Answer 2

selectedRowIds is actually an array, so comparing a string with an array of strings wouldn't work. You might want to consider using the Array.includes() method instead.

this.dataSource.data.filter(data => !selectedRowIds.includes(data.userId))

I hope this explanation clarifies things for you.

Update

This is based on an assumption since the actual workings of the deleteUser method are unknown. It appears that the service's method expects a single user ID. Therefore, you may need to either iterate over the selected IDs or modify the service method to handle an array of IDs. However, be cautious as making multiple separate API calls can lead to unexpected results.

selectedRowIds.forEach((selectedID) => {

    this.UserService.deleteUser(selectedID).subscribe(res =>{
    //                            ^^ Only one ID is passed here

        this.dataSource.data = this.dataSource.data.filter(data => data.userId !== selectedID);
    //                                                                 ^^^^^^^^^^^^^^^^ Filtering by selectedID
      }, err =>{
        console.error(err);  
      }, ()=>{
        // this.clearUserForm();
        this.loadUsers(this.pageIndex);
      }
    );
});

However, I do not recommend this approach due to potential multiple API calls being made (if applicable).

Answer 3

Answer №2

After much searching, I have finally discovered the solution to my issue

Component Code

selectedRow: any;

removeSelectedRows(){
    console.log(this.selectedRow.userId)
       this.UserService.deleteUser(this.selectedRow.userId).subscribe(res =>{
        this.dataSource.data = this.dataSource.data.filter(data => data.userId!== this.selectedRow.userId);
      }, err =>{
        console.error(err);  
      }, ()=>{
        this.ngOnInit();
        this.loadUsers(this.pageIndex);
      });
  }

Answer 4

After much searching, I have finally discovered the solution to my issue

Component Code

selectedRow: any;

removeSelectedRows(){
    console.log(this.selectedRow.userId)
       this.UserService.deleteUser(this.selectedRow.userId).subscribe(res =>{
        this.dataSource.data = this.dataSource.data.filter(data => data.userId!== this.selectedRow.userId);
      }, err =>{
        console.error(err);  
      }, ()=>{
        this.ngOnInit();
        this.loadUsers(this.pageIndex);
      });
  }

Delete information based on its unique identifier

Answer №1

Answer №2

Similar questions

What is the best way to ensure that an animation has finished before moving on to the next route?

The object must contain a property 'children', which is required in the type '{ children: any; }' but missing in the type '{}'

Is it possible in Firebase to retrieve multiple queries and consolidate them into a collectionData?

When the button is clicked, I desire to reveal the background color of a specific div

How can one effectively monitor the advancement of a file transfer operation?

What is the method for including a placeholder (instead of a label) in the MUI 5 DatePicker component?

Exploring the customization options for Prime NG components is a great way to

Creating type definitions for recursive functions in TypeScript

Yes, indeed - Entering the schema of a retrieved field from an Object schema

Managing clearing values/strings for different input types like text/password upon form submission in Angular2

What is the process for activating focus on an input element within a mat-select component?

How can the carousel item numbers be adjusted for proper display?

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

Select one of 2 parameters and begin typing

Collaborative React front end elements are now housed in their own TypeScript project within Visual Studio 2017

Setting up Angular Universal on an already existing Angular 2 application with the help of the CLI

Next.js TypeScript throws an error stating that the object 'window' is not defined

Advanced filtering of arrays in JavaScript

Is there another option for addressing this issue - A function that does not declare a type of 'void' or 'any' must have a return value?

In Angular 11, the error message "Type 'Object' cannot be assigned to type 'NgIterable<any> | null | undefined'" is appearing