javascript - 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 替换为定义它的对象。

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

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

如果您有这样的服务，您可以:

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

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