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}}"会返回错误，而我正试图弄清楚如何使用逻辑。

Answer 1

<强>更新

根据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

Answer 2

<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
}

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

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

2 个答案: