Привет, я новичок в Angular 13 и пытаюсь создать список элементов и удалить их один за другим. Я использовал (click) и removeUser() для удаления одного элемента, к сожалению, результат таков, что не важно, что нажата кнопка, все 3 элемента удаляются одновременно. Пожалуйста помоги. Спасибо

export class UserlistComponent {
     users = [
      {
        id : '1',
        name: 'Jack',
        age: '33'
      },
      {
        id : '2',
        name: 'Kim',
        age: '44'
      },
      {
        id : '3',
        name: 'Mag',
        age: '22'
      },

        ]
  
    removeUser(id:string): void{ 
          this.users = this.users.filter(user => user.id !== user.id)
    }
  
}
<li *ngFor="let user of users">

    {{user.name}} is {{user.age}} years old
    <button (click)="removeUser(user.id)">Remove</button>


</li>
0
lacertezzadellapena 26 Ноя 2021 в 12:34

2 ответа

Лучший ответ

Вы используете свой фильтр на user.id для обеих сторон оператора сравнения.

Вам нужно сравнить с параметром вашего метода:

removeUser(id:string): void{ 
    this.users = this.users.filter(user => user.id !== id)
}
3
Tamir Abutbul 26 Ноя 2021 в 12:39
Спасибо огромное, не видел !!!!
 – 
lacertezzadellapena
26 Ноя 2021 в 12:50

Исправьте свой вопрос

Вы неправильно используете оператор фильтра. Вы должны использовать парментер в функции removeUser, чтобы отфильтровать список.

removeUser(id:string): void{ 
    this.users = this.users.filter(user => user.id !== id)
}

Лучший подход

Вы можете просто соединить ненужные элементы с помощью Array.splice

Шаблон

<li *ngFor="let user of users; let i = index">
    {{user.name}} is {{user.age}} years old
    <button (click)="removeUser(i)">Remove</button>
</li>

Component.ts

removeUser(index): void{ 
    this.users.splice(index, 1)
}
1
Nitheesh 26 Ноя 2021 в 12:52