Угловой список ul самостоятельно удалить или обновить данные и обновить

Question

Я использую Angular 7, и у меня есть некоторые данные, отображаемые с помощью <ul> <li> ....

В каждом LI у меня есть кнопка закрытия и событие щелчка, которое запускает некоторый код, который удалит элемент из данных.

Вот код для компонента html:

<ul *ngFor="let dat of data">
  <li>
    <span>{{dat.name}}</span>
    <span (click)="removeFromData(dat.name)">
      <span>X</span>
    </span>
  </li>
</ul>

Данные в файле ts выглядят так:

data: [
    { name: 'name 1' },
    { name: 'another name' }
];

Мне нужно либо иметь возможность перезапустить / данные, чтобы я получил обновленное представление, либо просто заставить элемент исчезнуть.

Как я могу это сделать?

Answer 1

component.ts-

data = [
        {name:'ashish'},
        {name:'nakul'},
        {name:'vikas'},
        {name:'abhi'},
        {name:'syam'}
      ];

removeFromData(name:string){
    this.data = this.data.filter(val=>val.name!==name);
  }

component.html-

<ul *ngFor="let dat of data">
  <li>
    <span>{{dat.name}}</span>
    <button (click)="removeFromData(dat.name)">
      <span>X</span>
    </button>
  </li>
</ul>

для получения дополнительной информации проверьте stackblitz