Angular 6 - удаление данных из app.component.html и обновление изменений при просмотре

Question

У меня есть служба, которая получает список данных и отправляет его на app.component.html

Это код для отображения данных:

<ul>
    <li *ngFor="let data of retrieveData"> 
        {{ data.id }} - {{data.title}} <span><button (click)="delete(data.id)">Delete Record</button></span>
    </li>
</ul>

Как видите, я добавил кнопку удаления для каждой строки данных, которая затем вызывает метод для удаления данных с сервера.

Это работает, но в то же время мне нужно, чтобы эти данные были удалены из представления без перезагрузки страницы

На app.component.ts у меня есть этот метод, который затем вызвал метод обслуживания:

delete() {
    this.apiService.delete(1).subscribe(result => {
      console.log(result);
    }, error => console.log('There was an error: ', error));
}

Как обновить данные компонента, не перезагружая страницу?

Answer 1

Обновите отображаемую коллекцию, чтобы удалить удаленный элемент.

delete(id) {
    this.apiService.delete(id).subscribe(result => {
      console.log(result);
      this.retrieveData = this.retrieveData.filter((elem) => {
          return elem.id !== id;
      });
    }, error => console.log('There was an error: ', error));
}

Answer 2

Просто передайте индекс из ngFor в функцию delete () следующим образом:

<ul>
    <li *ngFor="let data of retrieveData; let idx = index"> 
        {{ data.id }} - {{data.title}} <span><button (click)="delete(data.id, idx)">Delete Record</button></span>
    </li>
</ul>

А потом в твоей функции удаления

delete(id, idx) {
  this.apiService.delete(id).subscribe(result => {
    console.log(result);
  }, error => console.log('There was an error: ', error));
  this.retrieveData.splice(idx, 1);
}

Answer 3

Сначала найдите индекс удаляемого объекта, в случае успеха удалите его из уже загруженного списка.

delete(passedId) {
    this.apiService.delete(passedId).subscribe(result => {
      console.log(result);
      let indexOfId = this.retrieveData.findIndex((eachEleme) => {
          return eachElem.id = passedId;
      }); //gives the index of the first matching id
          // asuming you have unique ids..
      this.retrieveData.splice(indexOfId,1);  // removes the element
                                              // from the preloaded list
      this.retrieveData.a.findIndex()
    }, error => console.log('There was an error: ', error));
}