角度2-ng用于动态功能

Question

I have a table component which takes an input JSON for the table format and another JSON for the data. My question is, when my table is rendered with *ngFor, how do I call cellFunction?

My table format JSON:

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

My Component

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

Depends mainly on where TestME1 and TestME2 are defined. If it is the TableComp , you can try doing:

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

If the functions are defined somewhere else, you just need to replace this with the Object where it is defined.

For example, you can have a service with all the color functions which you inject to the component:

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

If you have a service like that, you can do:

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

Actually, I have no idea what you are actually trying to do!

Answer 2

I have made this work, please check this link -> https://stackblitz.com/edit/angular-xwsq2a

Add colorChose method in component, and update template like this,

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

In component, in colorChose method

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

Create the executeFunctionByName method in the same component. This is used to call function when you know the function name as 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);
}

I hope you have methods mentioned in cellFunction , in this case testME1 , which returns color name,

testME1 () {
  return "red";
}

Hope it helps...