angular material的mat table组件是一个功能强大的数据展示工具。它通过datasource属性绑定数据，并支持排序、分页等功能。为了实现数据的动态更新，mat table通常依赖于其datasource能够响应底层数据变化并通知表格进行渲染。
在Angular中，数据的变化检测通常由Zone.js负责。然而，对于复杂的组件如Mat Table，当数据源本身发生变化（例如，数组元素被添加、删除或修改）时，仅仅修改数据源内部的数组可能不足以触发表格的重新渲染，尤其是在使用自定义数据源时。MatTableDataSource是Angular Material提供的一个标准数据源实现，它内部封装了对数据变化的监听机制，能够更可靠地触发表格更新。
当Mat Table的数据源是自定义实现，或者数据更新方式不符合MatTableDataSource的预期时，可能会出现表格数据已在后台更新，但视图未刷新的情况。一个典型的场景是，数据通过服务中的RxJS Subject进行管理和分发，当数据源数组通过splice等方法修改后，Subject也成功发出了新数据，但表格界面却无动于衷。只有在用户导航到其他页面再返回时，表格才显示最新的数据。
这通常是因为：
解决Mat Table不自动刷新的最直接和推荐的方法是使用@angular/material提供的MatTableDataSource。MatTableDataSource内部已经实现了对data属性变化的监听，当其data属性被赋予一个新的数组引用时，它会自动通知Mat Table进行更新。
组件 (your-component.component.ts)
首先，确保引入MatTableDataSource：
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table'; // 如果需要通过 @ViewChild 引用 MatTable
// ...其他导入
export class YourComponent implements OnInit, OnDestroy, AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
// 如果在 ngOnInit 或订阅中直接操作 this.dataSource，则不一定需要 @ViewChild(MatTable)
// @ViewChild(MatTable) table: MatTable<Process>;
// 将 ProcessesListDataSource 替换为 MatTableDataSource
dataSource: MatTableDataSource<Process>;
displayedColumns = ['name', 'description', 'lastUpdated', 'sla', 'kpi', 'options'];
processSub: Subscription;
constructor(private processesService: ProcessesService) { }
ngOnInit(): void {
// 订阅服务的数据变化。
// 使用 pipe(startsWith(null)) 确保订阅立即触发一次，
// 即使 processesChanged Subject 尚未发出任何值。
// 注意：startsWith(null) 会导致第一次数据为 null，MatTableDataSource 会处理为空表。
// 更健壮的做法是 startWith(this.processesService.getProcesses()) 如果 getProcesses() 返回 Observable
// 或者在订阅前手动初始化一次 dataSource。
this.processSub = this.processesService.processesChanged.pipe(
// 这里的 startsWith(null) 意味着初始时 MatTableDataSource 会被 new MatTableDataSource(null) 初始化，
// 然后当 processesService 发出数据时再更新。
// 更合理的做法是让 processesService.processesChanged 行为类似于 BehaviorSubject，
// 或在服务中暴露一个 Observable<Process[]> 包含初始数据。
// 但为了遵循原答案的思路，我们使用 startsWith(null)。
startsWith(null) // 初始发射 null，确保订阅立即执行一次
).subscribe(
(processes: Process[]) => {
// 每次数据更新时，重新创建 MatTableDataSource 实例
// 这会强制 Mat Table 重新绑定并刷新
this.dataSource = new MatTableDataSource(processes);
// 重新设置分页器和排序器
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
);
}
// ngAfterViewInit 在这里变得不必要，因为 paginator 和 sort 已经在 ngOnInit 的订阅中设置
// 并且 MatTableDataSource 的创建和属性设置都已在数据更新时完成。
ngAfterViewInit(): void {
// 确保在视图初始化后，如果 ngOnInit 尚未完成数据绑定，这里作为补充
// 但在上述 ngOnInit 逻辑中，这部分可能已不再需要，可以根据实际情况移除或调整
if (this.dataSource) {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
// 如果 ngOnInit 中的订阅逻辑能确保数据源始终被正确初始化，则此处的 table.dataSource 赋值也可移除
// this.table.dataSource = this.dataSource;
}
ngOnDestroy(): void {
this.processSub.unsubscribe();
}
deleteProcess(index: number) {
this.processesService.deleteProcess(index);
}
}服务 (processes.service.ts)
服务端的代码保持不变，因为它已经正确地在数据修改后通过Subject发出了更新。
import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
import { Process } from "../models/process.model";
@Injectable({ providedIn: 'root' }) // 推荐使用 'providedIn: root' 代替在 AppModule 中提供
export class ProcessesService {
processesChanged = new Subject<Process[]>();
private processes: Process[] = [
// ... 你的硬编码数据
{
name: 'PQS1_RES_FIBER_REQ_VDF',
description: 'sfiojsdfjlskamfdfsa',
lastUpdated: '2022-01-01 (PT)',
sla: [
{ name: 'qqsla', expression: 'dasdasd', condition: 'aasdasdad', threshold: 40, objective: 20, lastUpdated: '2022-01-01 (SP)' },
{ name: 'qqsla2', expression: 'dasdasd', condition: 'ddddd', threshold: 40, objective: 10, lastUpdated: '2022-01-04 (AL)' }
],
kpi: [
{ id: 'K123123', expression: 'count(sla(tempoTotal,compliant))/count', aggregation: 'Month', condition: 'Reabertura=true', objective: 100, alert: 50, care: 40, lastUpdated: '2022-01-01 (SP)' },
{ id: 'K008464', expression: 'avg(timer(preValidationTime))', aggregation: 'Month', condition: '*', objective: 150, alert: 110, care: -1, lastUpdated: '2022-04-10 (AL)' }
]
},
{
name: 'PQS1_RES_FIBER_REQ_PTC',
description: 'fdfsfdffd',
lastUpdated: '2022-05-15 (PT)',
sla: [
{ name: 'qqsla', expression: 'dasdasd', condition: 'aasdasdad', threshold: 40, objective: 20, lastUpdated: '2022-01-01 (SP)' },
{ name: 'qqsla2', expression: 'dasdasd', condition: 'ddddd', threshold: 40, objective: 10, lastUpdated: '2022-01-04 (AL)' }
],
kpi: [
{ id: 'K123123', expression: 'count(sla(tempoTotal,compliant))/count', aggregation: 'Month', condition: 'Reabertura=true', objective: 100, alert: 50, care: 40, lastUpdated: '2022-01-01 (SP)' },
{ id: 'K008464', expression: 'avg(timer(preValidationTime))', aggregation: 'Month', condition: '*', objective: 150, alert: 110, care: -1, lastUpdated: '2022-04-10 (AL)' }
]
},
{
name: 'PQS2_MTR_URG_JI_DIRECT',
description: 'jvvrrrttrrtrtrt',
lastUpdated: '2022-01-03 (PT)',
sla: [
{ name: 'qqsla', expression: 'dasdasd', condition: 'aasdasdad', threshold: 40, objective: 20, lastUpdated: '2022-01-01 (SP)' },
{ name: 'qqsla2', expression: 'dasdasd', condition: 'ddddd', threshold: 40, objective: 10, lastUpdated: '2022-01-04 (AL)' }
],
kpi: [以上就是Angular Mat Table动态数据更新与常见陷阱解析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
404
