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

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

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

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

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

实际上，我不知道你到底想要做什么！

Answer 2

我完成了这项工作，请查看此链接 - ＆gt; 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";
}

希望它有所帮助...

角度2 - ng用于动态功能

2 个答案: