Angular - перерисовать таблицу при удалении элемента

Question

У нас есть datatable в угловых.У всех элементов есть кнопка удаления.Когда мы нажимаем эту кнопку, вызываем веб-сервис и удаляем его.HTML-код похож на:

 <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>User</th>
                        <th>{{'action' | translate}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let user of users">
                        <td>{{user.user}}</td>
    <td>         <a title="{{'delete' | translate}}" (click)="delete(user)"><i
                          class="fas fa-trash"></i></a> </td>
                      </tr>
                    </tbody>
                  </table>

И файл TS похож на.

  ngOnInit(): void {
    AdminLTE.init();
    this.dtOptions = {
      pagingType: "full_numbers",
      pageLength: 10,
      sScrollX: "100%",
      responsive: true,
      processing: true,
      searching: true,
      destroy:true,
      }
    };

    this.usersCtrl.getUsers().subscribe(
      response => {
        this.users = response["body"];
        this.dtTrigger.next();
      },
      error => {
        console.log(error);
      }
    );
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }

Так что вопрос: Как я могу перерисовать данные, когда пользователь удаляет один из этих элементов?Я знаю, что могу использовать window.location.reload, но я ищу более элегантный способ.

Answer 1

Я бы просто вызвал функцию, чтобы получить пользователей снова после удаления, чтобы получить последних пользователей, поэтому:

import { switchMap } from 'rxjs/operators';

// ...

deleteUser() {
  // replace delete function with your actual function
  this.usersCtrl.deleteUser().pipe(
    switchMap(() => this.usersCtrl.getUsers())
  )
  // below is your getUsers response
  .subscribe(response => { ... }) 
}

Я использую switchMap здесь для объединения запросов.