Angular使用Json Server时新增数据后无刷新更新Material表格方法求助

依次修改以下代码即可实现新增后无刷新更新表格的效果： #

第一步：修正基础定义与Service代码 #

你现有的类型定义和Service方法存在两处问题：PeriodicElement缺少JSON Server返回的id字段、列表查询接口返回类型定义错误。

修改类型定义 #

export interface PeriodicElement {
  id?: number; // 新增id字段，新增操作时无需传值，JSON Server会自动生成
  name: string;
}

修改Service代码 #

public url: string = 'http://localhost:3000/tableInfos';

constructor(private http: HttpClient) { }

// 修正返回类型为元素数组
getTableDetails(): Observable<PeriodicElement[]> {
  return this.http.get<PeriodicElement[]>(this.url);
}

create(element: PeriodicElement): Observable<PeriodicElement> {
  // 去掉多余的参数嵌套，直接传递元素对象
  return this.http.post<PeriodicElement>(this.url, element);
}

第二步：修改组件逻辑 #

新增操作成功后更新表格数据源即可，两种实现方案按需选择：

方案1：新增后重新拉取全量列表（数据和后端完全一致，更稳妥） #

ELEMENT_DATA!: PeriodicElement[]
displayedColumns: string[] = ['name'];
dataSource = new MatTableDataSource<PeriodicElement>(this.ELEMENT_DATA);

constructor(private tableService: TableService) {}

ngOnInit(): void {
  this.get();
}

get() {
  this.tableService.getTableDetails().subscribe((data: PeriodicElement[]) => {
    this.dataSource.data = data;
  });
}

add(name: string) {
  this.tableService.create({name: name}).subscribe(() => {
    // 新增成功后重新拉取列表刷新表格
    this.get();
  });
}

方案2：直接追加新增数据（少一次网络请求，性能更好） #

add(name: string) {
  this.tableService.create({name: name}).subscribe((newElement: PeriodicElement) => {
    // 拿到后端返回的带id的新元素，直接追加到现有数据源
    const currentData = this.dataSource.data;
    currentData.push(newElement);
    this.dataSource.data = currentData;
    // 若遇到表格未刷新的特殊情况，可补充下行代码强制触发重绘
    // this.dataSource._updateChangeSubscription();
  });
}

内容的提问来源于stack exchange，提问作者liliArte