Angular 2中*ngFor渲染动态表格时如何调用cellFunction？

这是个很常见的Angular动态渲染场景，我来帮你搞定！

问题分析 #

你现在的cellFunction是字符串类型（比如'testME1'），而不是组件中实际函数的引用，所以直接在模板里写c.cellFunction()肯定会报错——字符串可没法当函数执行呀！

解决方案 #

我们可以把组件内的处理函数存到一个对象里，通过字符串key来匹配调用，具体步骤如下：

1. 在组件类中定义函数映射对象

首先在TableComp类里，把你需要的单元格处理函数都放到一个cellFunctions对象中，用字符串作为key，对应到实际的函数：

import { Component, Input } from '@angular/core';
@Component({
 selector: 'table-comp',
 template: `<!-- 模板内容稍后修改 -->`
})
export class TableComp {
  @Input() tableInfo: any[] = [];
  @Input() data: any[] = [];

  // 定义函数映射表，key和tblFormat里的cellFunction字符串对应
  cellFunctions = {
    testME1: (cellValue: any) => {
      // 这里写testME1的逻辑，比如根据返回值设置颜色
      // 示例：如果订单ID大于1000返回红色，否则蓝色
      return cellValue > 1000 ? 'red' : 'blue';
    },
    testME2: (cellValue: any) => {
      // testME2的逻辑，比如根据买家名称长度设置颜色
      return cellValue.length > 5 ? 'green' : 'blue';
    }
  };
}

2. 在模板中调用映射的函数

修改模板里的<td>部分，通过cellFunctions[c.cellFunction]获取对应的函数，然后传入当前单元格的值d[c.df]调用：

<table class="table table-hover">
  <thead>
    <tr>
      <th *ngFor="let h of tableInfo" [style.color]="h.color">{{h.headerTxt}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let d of data">
      <td *ngFor="let c of tableInfo" 
          [style.color]="cellFunctions[c.cellFunction](d[c.df])">
        {{d[c.df]}}
      </td>
    </tr>
  </tbody>
</table>

3. 可选：添加容错处理

如果担心存在未定义的cellFunction字符串，可以加个判断避免报错：

<td *ngFor="let c of tableInfo" 
    [style.color]="cellFunctions[c.cellFunction] ? cellFunctions[c.cellFunction](d[c.df]) : c.color">
  {{d[c.df]}}
</td>

这里如果找不到对应的函数，就回退使用c.color作为默认颜色。

补充说明 #

为什么不能直接用字符串调用函数？因为JSON格式只能存储字符串、数字等基本类型，没法直接存储函数引用，所以我们只能用字符串作为“钥匙”，去组件内的函数映射表里找到对应的函数执行。

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