Блог

Главная - Вопросы по программированию - Список ul Angular самостоятельно удаляет или обновляет данные и обновляет

Список ul Angular самостоятельно удаляет или обновляет данные и обновляет

#angular #typescript #angular7

#angular #typescript #angular7

Вопрос:

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

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

Вот код для компонента 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' }
];

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

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

Комментарии:

1. вместо данных, если вы должны быть наблюдаемыми, например, Subject , тогда это возможно.

2. можете ли вы предоставить ts файл

3. Я обновил вопрос

4. пожалуйста, проверьте ответ, который я дал. дайте мне знать, работает ли это у вас?

Ответ №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