angular 2 - ngFor 动态函数

Question

我有一个表格组件，它采用输入 JSON 作为表格格式，采用另一个 JSON 作为数据。我的问题是，当我的表格使用 *ngFor 渲染时，如何调用 cellFunction？

我的表格格式 JSON：

tblFormat= [
        { headerTxt: 'Order ID', df: 'Order_ID', color: 'blue', cellFunction: 'testME1' },
        { headerTxt: 'Buyer Name', df: 'name', color: 'blue',cellFunction: 'testME2' }
]

我的组件

import { Component, AfterViewInit, ViewChild, Input } from '@angular/core';

@Component({
    selector: 'table-comp',
    template: `<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]=" how do I? c.cellFunction()">
                {{d[c.df]}}
            </td>
        </tr>
    </tbody>
 </table>`
    inputs: ['data','tableInfo']
})

export class TableComp {
    tableInfo=[];
    data=[];
} 

Answer 1

主要取决于TestME1 和TestME2 的定义位置。如果是TableComp，可以试试：

 <td *ngFor="let c of tblFormat" [style.color]="this[c.cellFunction]()">

如果函数在其他地方定义，您只需将this 替换为定义它的对象。

例如，您可以拥有一个包含您注入组件的所有颜色函数的服务：

class TableComp {
    constructor(public colorFunctions: ColorFunctions) {}
}

如果你有这样的服务，你可以这样做：

<td *ngFor="let c of tblFormat" [style.color]="colorFunctions[c.cellFunction]()">

其实，我不知道你到底想做什么！

Answer 2

我已经完成了这项工作，请检查此链接 -> https://stackblitz.com/edit/angular-xwsq2a

在组件中添加colorChose方法，并像这样更新模板，

<td *ngFor="let c of tblFormat" [style.color]="colorChose(c.cellFunction)">

在组件中，在colorChose方法中

colorChose (param) {
  return this.executeFunctionByName(param, this);  
}

在同一个组件中创建executeFunctionByName 方法。当您知道函数名称为string 时，这用于调用函数。

executeFunctionByName(functionName, context /*, args */) {
  var args = Array.prototype.slice.call(arguments, 2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
}

希望你有cellFunction中提到的方法，在本例中是testME1，它返回颜色名称，

testME1 () {
  return "red";
}

希望对你有帮助...