угловая 2 - нг для динамической функции - PullRequest
Новая
       17

угловая 2 - нг для динамической функции

0 голосов
/ 10 мая 2018

У меня есть компонент таблицы, который принимает входной 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=[];
}

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Зависит главным образом от того, где определены 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]()">

На самом деле, я понятия не имею, что вы на самом деле пытаетесь сделать!

0 голосов
/ 10 мая 2018

Я сделал эту работу, пожалуйста, проверьте эту ссылку -> 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";
}

Надеюсь, это поможет ...

...