Angular中使用对象数组查询结果作为NgFor数据源的语法咨询

问题修复点 #

• 模板中禁止直接执行find这类计算逻辑，会导致多次触发变更检测性能下降，且未匹配到值时会抛出空指针错误
• 模板字符串引号嵌套错误，外层双引号内层需使用单引号
• 原始JSON定义缺少闭合双引号，类型定义范围过宽导致模板属性访问报错
• *ngFor 索引声明语法错误，不能直接绑定行属性到索引变量
• 模板中变量输出需要用{{ }}插值表达式包裹

修正后代码 #

TS 文件 #

// 先定义明确的行数据类型，避免类型报错
interface TableRow {
  Id: string;
  Col1: string;
  Col2: string;
}

interface JsonDataItem {
  id: string;
  json: TableRow[];
}

// 组件类内部代码
jsonData: JsonDataItem[] = [];
// 单独定义筛选后的表格数据源
tableDataSource: TableRow[] = [];

ngOnInit(): void {
  // 修正原JSON缺少的闭合双引号
  const json: TableRow[] = [
    {
      "Id": "1",
      "Col1": "val11",
      "Col2": "val12"
    },
    {
      "Id": "2",
      "Col1": "val21",
      "Col2": "val22"
    }
  ];
  this.jsonData.push({ id: "100", json: json });
  
  // 提前在TS中完成筛选逻辑
  const targetItem = this.jsonData.find(e => e.id === "100");
  // 匹配到值再赋值，避免空指针
  if (targetItem) {
    this.tableDataSource = targetItem.json;
  }
}

// 如需动态根据ID查询，可单独封装方法
getTableDataSource(targetId: string): TableRow[] {
  const target = this.jsonData.find(item => item.id === targetId);
  return target ? target.json : [];
}

HTML 文件 #

<!-- 先判断数据源存在再渲染，避免报错 -->
<ng-container *ngIf="tableDataSource.length > 0">
  <ng-container *ngFor="let row of tableDataSource; let i = index">
    <!-- 表格渲染可替换为tr/td结构 -->
    <tr>
      <td>{{i}}</td>
      <td>{{row.Id}}</td>
      <td>{{row.Col1}}</td>
      <td>{{row.Col2}}</td>
    </tr>
  </ng-container>
</ng-container>

<!-- 动态传ID查询的写法 -->
<!-- <ng-container *ngFor="let row of getTableDataSource('100')"> -->

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