如何等到删除完成然后重新加载 angular 垫表

Question

我的 angular 项目中有一张垫子表，如下所示：

使用 rest API 从服务器获取数据。服务器端使用 nodejs 和 sequelize。 当我单击删除按钮时，我希望我的 mat 表用新数据刷新。 但不幸的是，刷新数据在删除完成之前加载，所以看起来好像删除按钮不起作用。

这是我的代码：

列表.component.ts

import {AfterViewInit, ChangeDetectorRef, Component, ViewChild} from '@angular/core';
import {MatPaginator, PageEvent} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { ClientService } from 'src/app/core/services/client.service';
import { MainService } from 'src/app/core/services/main.service';
import { Client } from 'src/app/models/client.model';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements AfterViewInit {

  clients: Client[];

  displayedColumns: string[] = ['client_name', 'client_address', 'client_home_phone', 'client_mobile_phone', 'client_status', 'buttons'];
  dataSource: MatTableDataSource<Client>;

  length = 0;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private changeDetectorRefs: ChangeDetectorRef, private router: Router, private titleService: Title, private mainService: MainService, private clientService: ClientService) {
    this.titleService.setTitle('Clients');
    this.mainService.setPageTitle('Clients');
    this.mainService.setButtonToolbar([
      {
        'url': 'create',
        'icon': 'add',
        'color': 'primary'
      },
    ]);

    this.clientService.list(25, 0).subscribe(clients => {
      this.clients = clients.data;
      this.dataSource = new MatTableDataSource(this.clients);
      this.length = clients.count;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }

  ngAfterViewInit() {

  }

  onChangedPage(pageData: PageEvent) {
    this.clientService.list(pageData.pageSize, pageData.pageIndex * pageData.pageSize).subscribe(clients => {
      this.clients = clients.data;
      this.dataSource = new MatTableDataSource(this.clients);
      this.length = clients.count;
      this.dataSource.sort = this.sort;
    });
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.clientService.list(this.paginator.pageSize, 0, filterValue).subscribe(clients => {
      this.clients = clients.data;
      this.dataSource = new MatTableDataSource(this.clients);
      this.length = clients.count;
      this.dataSource.sort = this.sort;
    });
  }

  onUpdate(id: String) {
    this.router.navigate(['/client/update/'+id]);
  }

  onDelete(id: string) {
    this.clientService.delete(id).subscribe(response => {
      if (response == 200) {
        this.clientService.list(this.paginator.pageSize, 0).subscribe(clients => {
          this.clients = clients.data;
          this.dataSource = new MatTableDataSource(this.clients);
          this.length = clients.count;
          this.dataSource.sort = this.sort;

          this.changeDetectorRefs.detectChanges();
        });
      }
    });
  }

}

客户端.service.ts

import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from "rxjs/operators";
import { Client } from "src/app/models/client.model";
import { MainService } from 'src/app/core/services/main.service';

@Injectable()
export class ClientService {

  constructor(private http: HttpClient, private mainService: MainService) {}

  list(limit: number, offset: number, filter?: string) {
    let queryParams = '?limit='+limit+'&offset='+offset;
    if (filter) {
      queryParams += '&filter='+filter;
    }
    return this.http
    .get(this.mainService.getbaseApiUrl()+"client/list" + queryParams)
    .pipe(map(responseData => {
      const clientArray = [...responseData['rows']];

      return {data: clientArray, count: responseData['count']};
    }));
  }

  get(id: string) {
    return this.http
      .get(this.mainService.getbaseApiUrl()+"client/one/"+id);
  }

  add(client: Client) {
    return this.http
      .post(this.mainService.getbaseApiUrl()+'client/add', client, {
        headers: new HttpHeaders({
          // 'Origin': '*',
          //'Access-Control-Allow-Origin': '*',
          //'Access-Control-Allow-Credentials': 'true',
          'Content-Type':  'application/json',
        })
      });
  }

  update(client: Client) {
    return this.http
      .post(this.mainService.getbaseApiUrl()+'client/edit', client, {
        headers: new HttpHeaders({
          // 'Access-Control-Allow-Origin': '*',
          // 'Access-Control-Allow-Credentials': 'true',
          'Content-Type':  'application/json',
        })
      });
  }

  delete(id: string) {
    return this.http.delete(this.mainService.getbaseApiUrl()+'client/delete/'+id);
  }
}

我是 Angular 的新手，这看起来很简单，但我想不出任何解决方案。 有没有办法让Angular等到删除完成再刷新？ 临时解决方案是使用 setTimeout，这样 mat 表将在等待 X 秒后刷新，但我认为这不是一个干净的解决方案。

请帮忙。

更新：

我的临时解决方案是重新加载当前路由器。

应用程序路由.module.ts

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

列表.component.ts

ngOnInit() {
  this.router.routeReuseStrategy.shouldReuseRoute = () => {
    return false;
  }
}

onDelete(id: string) {
    this.clientService.delete(id).subscribe(response => {
      if (response == 200) {
        this.router.navigate(['/client']);
      }
    });
}

但是，如果有其他比这个更好的解决方案，那就太好了。

Answer 1

      onDelete(id: string) {
this.clientService.delete(id)
.pipe(switchMap(() => this.clientService.list(this.paginator.pageSize, 0)
.subscribe(clients => {
      this.clients = clients.data;
      this.dataSource = new MatTableDataSource(this.clients);
      this.length = clients.count;
      this.dataSource.sort = this.sort;

      this.changeDetectorRefs.detectChanges();
    });

Answer 2

让我们从声明开始

export class ListComponent implements AfterViewInit {

 dataSource: MatTableDataSource<Client>;

把它变成，

export class ListComponent implements AfterViewInit {
    
     dataSource: MatTableDataSource<Client> = new MatTableDataSource<Client>();

您创建一次数据源，然后只更新它包含的数据，而不是完整的数据源。

然后在您刷新表格的代码中的任何地方，请替换您拥有的以下内容

  this.clients = clients.data;
  this.dataSource = new MatTableDataSource(this.clients);
  this.length = clients.count;
  this.dataSource.sort = this.sort;

用这个只更新表的数据。

  this.dataSource.data = clients.data;

Angular 将能够识别数据何时发生变化并刷新出现在 MatTable 中的数据。