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()); // 发送新的数组副本
        }
    }
}