Angular中通过service向数组push数据后mat-table不显示问题

问题原因 #

Angular Material 的 mat-table 默认采用引用检测机制触发渲染：只有当绑定给 dataSource 的数组引用发生变更时，才会重新渲染表格内容。你现在直接调用数组的 push() 方法修改的是原数组的内容，数组本身的引用没有变化，因此 mat-table 不会触发重绘，自然看不到新增数据。

解决方案（按实现复杂度从低到高选择） #

方案1：修改数组赋值逻辑，主动变更引用 #

修改 DataService 中的添加方法，新增数据时不使用 push 直接修改原数组，而是通过扩展运算符返回新数组，触发引用变更：

// service.ts 调整后代码
pushToJobs(userjob: Job) {
  // 不使用push，返回新数组触发引用变化
  this.jobs = [...this.jobs, userjob];
  console.log(userjob, this.jobs);
}

addUser(user: User) {
  this.users = [...this.users, user];
  console.log(user, this.users);
}

如果你的表格 dataSource 是直接绑定的 dataService.jobs，修改后即可生效。

方案2：手动调用mat-table的重绘方法 #

如果不想修改数组的操作逻辑，可以在使用mat-table的组件中主动触发表格重绘：

1. 先通过ViewChild获取表格实例：

// 表格所在的组件ts
import { MatTable } from '@angular/material/table';

@ViewChild(MatTable) table!: MatTable<any>;

2. 每次调用service添加数据后，调用renderRows()方法：

onSubmit() {
  const singleJob: Job = {
    name: this.signupForm.controls['jobsName'].value,
    points: this.signupForm.controls['jobPoints'].value,
  };
  this.dataService.pushToJobs(singleJob);
  // 新增行后手动触发重绘
  this.table.renderRows();
}

方案3：采用响应式数据流（推荐中大型项目使用） #

通过RxJS的BehaviorSubject封装数据，实现数据变更自动通知组件更新：

1. 修改DataService：

import { BehaviorSubject } from 'rxjs';

export class DataService {
  // 私有Subject，内部管理数据
  private jobsSub = new BehaviorSubject<Job[]>([
    { name: 'sprzatanie', points: 10 },
    { name: 'gotowanie', points: 20 },
    { name: 'mycie okien', points: 30 },
    { name: 'wyniesc smieci', points: 10 },
    { name: 'zmywanie', points: 50 },
  ]);
  // 对外暴露Observable，供组件订阅
  jobs$ = this.jobsSub.asObservable();

  pushToJobs(userjob: Job) {
    const currentJobs = this.jobsSub.value;
    this.jobsSub.next([...currentJobs, userjob]);
    console.log(userjob, this.jobsSub.value);
  }
}

2. 表格组件订阅数据更新dataSource：

// 表格所在组件ts
ngOnInit() {
  this.dataService.jobs$.subscribe(jobs => {
    this.dataSource.data = jobs;
  })
}

内容的提问来源于stack exchange，提问作者Kacper Czerwiński