Angular 4 If 条件基于从 API 收到的值

Question

我想根据 API 中的值更改 primeng 数据表的背景颜色。

这是我的对象格式的零件颜色数组，需要与从 API 中提取的派对名称相匹配。

this.partyColours = [{liberal: 'red'},{pc: 'blue'},{ndp: 'ndp'},{green: 'green'}];

这是我的 HTML 代码：

<p-column field="politicalParty" header="Party" [filter]="true" filterMatchMode="equals" 
                                 [style]="background-color: {{partyColours}}">
  <ng-template pTemplate="filter" let-col>
      <p-dropdown [options]="politicalParties" [style]="{'width':'100%'}" 
                  (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" 
                  styleClass="ui-column-filter"></p-dropdown>
  </ng-template>
</p-column>

如您所见，"background-color: {{partyColours}}" returns 是一个错误，我正在尝试弄清楚如何处理该逻辑。

Answer 1

<p-column field="politicalParty" header="Party" [filter]="true" filterMatchMode="equals" 
[style.backgroundColor]="pickColor(politicalParties.name)">

在你的组件中

pickColor(name: string) {
if (name === 'liberal')
return 'red'
if( name === 'pc')
return 'blue'

// same structure for all parties
}

这是最简单的方法，你也可以走class这条路。显然 politicalParties.name 需要正确...我不知道你的派对对象是什么样的，你可能需要遍历数组或使用 *NgFor

Answer 2

更新：

根据the issue

<ng-template let-col let-row="rowData" let-ri="rowIndex" pTemplate="body">
   <span #x>{{ setColor(x, row[col.field]) }}{{row[col.field]}}</span>
</ng-template>


setColor(x, data) {
  x.parentNode.parentNode.style.background = this.partyColoursMap[data);
}

Plunker Example

旧版本：

您可以使用以下语法：

<p-column field="politicalParty" header="Party" [filter]="true" class="red"
   [style]="{ backgroundColor: partyColoursMap[selectedParty] }" ...>
    <ng-template pTemplate="filter" let-col>
      <p-dropdown [options]="politicalParties" [(ngModel)]="selectedParty" ...></p-dropdown>
    </ng-template>
</p-column>

其中partyColoursMap对象是根据partyColours数组计算的：

partyColoursMap: any = {};  

ngOnInit() {
  this.partyColours.forEach(x => 
      Object.keys(x).forEach(key => this.partyColoursMap[key] = x[key]));
}

Stackblitz Example

Angular 4 If 条件基于从 API 收到的值

Angular 4 If condition based on the value received from API

angular

primeng