Angular MatTable 动态数据更新与常见陷阱解析

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTable, MatTableDataSource } from '@angular/material/table'; import { Subscription } from 'rxjs'; import { startsWith } from 'rxjs/operators'; // 引入 startsWith 操作符 import { Process } from '../models/process.model'; import { ProcessesService } from '../processes.service';  @Component({   selector: 'app-processes-list',   templateUrl: './processes-list.component.html',   styleUrls: ['./processes-list.component.css'] }) export class ProcessesListComponent implements OnInit, OnDestroy {   @ViewChild(MatPaginator) paginator!: MatPaginator; // 使用非空断言   @ViewChild(MatSort) sort!: MatSort; // 使用非空断言   @ViewChild(MatTable) table!: MatTable<Process>; // 使用非空断言    dataSource: MatTableDataSource<Process> = new MatTableDataSource<Process>(); // 初始化为 MatTableDataSource    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */   displayedColumns = ['name', 'description', 'lastUpdated', 'sla', 'kpi', 'options'];    processSub!: Subscription; // 使用非空断言    constructor(private processesService: ProcessesService) { }    ngOnInit(): void {     // 订阅服务的数据变化。     // 使用 pipe(startsWith(null)) 确保组件初始化时立即获取初始数据，     // 避免等待第一次 processesChanged.next() 调用。     this.processSub = this.processesService.processesChanged.pipe(       startsWith(null as any) // startsWith 期望一个值，null 或空数组都可以作为初始值     ).subscribe(       (processes: Process[]) => {         // 当数据更新时，将新数据赋值给 dataSource.data         // MatTableDataSource 会检测到 data 属性的变化并触发表格刷新         this.dataSource.data = processes;          // 确保 paginator 和 sort 在数据加载后被正确应用         // 这一步可以在订阅回调中完成，因为 paginator 和 sort 视图子元素在 ngOnInit 后可用         // 或者在 ngAfterViewInit 中设置一次，但如果 dataSource 实例被替换，需要在替换后重新设置         // 这里选择在每次数据更新时重新设置，以确保其始终指向当前 dataSource 实例         if (this.dataSource.paginator !== this.paginator) { // 避免重复赋值，提高性能           this.dataSource.paginator = this.paginator;         }         if (this.dataSource.sort !== this.sort) { // 避免重复赋值，提高性能           this.dataSource.sort = this.sort;         }       }     );      // 首次加载数据     // 在订阅之前，先手动触发一次数据加载，确保表格在 ngOnInit 时就有数据     // 或者依赖 startsWith(this.processesService.getProcesses())     this.processesService.processesChanged.next(this.processesService.getProcesses());   }    ngOnDestroy(): void {     // 组件销毁时取消订阅，防止内存泄漏     if (this.processSub) {       this.processSub.unsubscribe();     }   }    // ngAfterViewInit 在此场景下不再需要，因为 paginator 和 sort 的绑定已移至 ngOnInit 的订阅回调中   // 如果 dataSource 实例在组件生命周期中保持不变，ngAfterViewInit 仍可用于初始绑定   // 但在此解决方案中，数据更新时会重新设置 paginator 和 sort，因此 ngAfterViewInit 不再是必需的。   // ngAfterViewInit(): void {   //   this.dataSource.sort = this.sort;   //   this.dataSource.paginator = this.paginator;   // }    deleteProcess(index: number) {     this.processesService.deleteProcess(index);     // 服务中的 deleteProcess 方法已经调用了 processesChanged.next()，     // 这将触发 ngOnInit 中的订阅回调，进而更新 dataSource.data，实现表格刷新。   } }

import { Injectable } from "@angular/core"; import { Subject } from "rxjs"; import { Process } from "../models/process.model";  @Injectable({     providedIn: 'root' // 推荐使用 providedIn: 'root' 来提供服务，替代在 NgModule 中声明 }) export class ProcessesService {      processesChanged = new Subject<Process[]>();      private processes: Process[] = [         // ... 初始数据保持不变     ];      getProcesses(): Process[] {         return this.processes.slice(); // 始终返回数组副本     }      getProcessByName(name: string): Process | undefined { // 明确返回类型为 Process 或 undefined         return this.processes.find((process: Process) => process.name === name);     }      addProcess(process: Process) {         this.processes.push(process);         this.processesChanged.next(this.processes.slice()); // 发送新的数组副本     }      deleteProcess(index: number) {         if (index >= 0 && index < this.processes.length) { // 添加边界检查             this.processes.splice(index, 1);             this.processesChanged.next(this.processes.slice()); // 发送新的数组副本         }     } }