Angular 7动态多ngTemplate问题：Grid组件列内容为空排查

我来帮你梳理一下可能导致这个问题的几个常见原因，你可以逐一排查：

• 动态列的字段绑定不匹配
  首先检查你动态创建列时设置的field属性，是否和数据源对象里的字段名完全一致（包括大小写）。比如如果你的数据源里是{ studentName: "小明", managerName: "李经理" }，但动态列的field写的是student和manager，那肯定会显示为空。一定要确保字段名拼写、大小写完全对应，Angular的属性绑定是严格匹配的。

• 网格组件未正确处理动态列
  确认你的gridComponent是否正确接收并渲染了父组件传入的动态列。比如组件模板里遍历列的时候，是不是用了正确的绑定方式：

  <!-- 正确的写法 -->
  <div *ngFor="let col of dynamicColumns">
    <span>{{ row[col.field] }}</span>
  </div>
  

  如果写成{{ row.col.field }}就会无法正确取值。另外，如果动态列是在组件初始化后才传入的，要确保组件用ngOnChanges钩子监听列数组的变化，及时更新渲染逻辑，不然组件可能不会感知到新的列配置。

• 数据源加载时机滞后
  看看你的数据源是不是异步加载的（比如从API获取），如果网格组件已经渲染完成了，数据才返回，那列就会显示为空。这种情况可以用*ngIf确保数据准备好再渲染网格：

  <app-grid *ngIf="dataSource" [columns]="dynamicColumns" [data]="dataSource"></app-grid>
  

  或者在网格组件里监听data输入属性的变化，当数据更新时重新渲染内容。

• 数据源中对应字段值为空/未定义
  直接在app.component.ts里打印数据源确认一下：console.log(this.dataSource)，看看每个数据对象里的student和manager字段是不是真的有值。有可能你以为数据存在，但实际是undefined或者null，这种情况下列自然会显示为空。

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