Angular 4 Si la condition est basée sur la valeur reçue de l'API

Question

Je voudrais changer la couleur d'arrière-plan d'une primitive datatable basée sur la valeur de l'API.

Il s'agit de ma matrice de couleurs de pièces au format objet qui doit correspondre au nom du correspondant extrait de l'API.

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

Ceci est mon code 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> 

Comme vous pouvez voir que "background-color: {{partyColours}}" renvoie une erreur et je suis en train de comprendre comment fonctionne la logique.

Answer 1

Mise à jour:

Selon 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

ancienne version:

Vous pouvez utiliser la syntaxe suivante:

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

où l'objet partyColoursMap est calculé sur la base tableau 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)"> 

dans votre composant

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

// same structure for all parties 
} 

C'est la façon la plus simple, vous pouvez aussi aller la route de classe. Il est évident que doit politicalParties.name être correct ... Je ne sais pas ce que votre objet parti ressemble, vous pourriez avoir besoin de boucle à travers un tableau ou utiliser * NgFor