如何在Mat-Table中展示无重复数据列表？解决map未定义报错

错误根源 #

1. 构造函数执行时机问题：组件构造函数执行时，this.model仅声明类型未初始化赋值，处于undefined状态，此时调用map方法直接触发报错。
2. 异步数据未同步更新：getList是异步请求，构造函数代码不会等待请求完成再执行，即便后续请求返回数据，构造函数内的去重逻辑也不会重新触发。

修复步骤 #

1. 初始化数组避免undefined

给model和result初始化空数组，从根源消除undefined隐患：

model: myModel[] = [];
myObj: any;
result: string[] = []; // 明确类型，避免any类型风险

2. 把去重逻辑移到数据回调中

将去重操作放到异步请求返回数据后执行，同时提取成统一方法，方便分页场景复用：

constructor() {
  // 移除构造函数内的去重代码
}

ngOnInit() {
  this.getList();
}

getList() {
  this.services.getListAll(5, 1).subscribe((data: myModel[]) => {
    this.myObj = data;
    this.model = this.myObj.items || []; // 兜底处理，防止items为undefined
    this.updateUniqueNames();
  });
}

onPaginateChange(event: PageEvent) {
  let index = event.pageIndex;
  let size = event.pageSize;
  index = index + 1;

  this.services.getListAll(size, index).pipe(first()).subscribe((data: myModel[]) => {
    this.myObj = data;
    this.model = this.myObj.items || [];
    this.updateUniqueNames();
  });
}

// 统一处理去重逻辑
private updateUniqueNames() {
  this.result = Array.from(new Set(this.model.map(item => item.Name)));
}

3. 可选增强：过滤空值

如果Name字段可能为空，可在map时过滤无效数据：

private updateUniqueNames() {
  this.result = Array.from(
    new Set(this.model.map(item => item.Name).filter(name => name))
  );
}

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