2017-10-13 2 views
1

Je voudrais changer la couleur d'arrière-plan d'une primitive datatable basée sur la valeur de l'API.Angular 4 Si la condition est basée sur la valeur reçue 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.

+0

Oui, comment je fais ça? – azmatrix

+0

Comme vous pouvez le voir dans l'exemple de '' [options] = "politicalParties" 'obtient les parties de l'API. Si je peux en quelque sorte connecter le nom de la partie au tableau de couleurs cela devrait fonctionner – azmatrix

Répondre

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

+0

Merci, mais votre exemple stackblitze vient vide dans le navigateur – azmatrix

+0

Essayez de le rouvrir – yurzui

+0

Just did, no go – azmatrix

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

+0

Hey merci, voici à quoi ressemble mon objet dans le composant: 'this.partyColours = [{parties: [ {liberal: 'red'}, {pc: 'blue'}, {ndp: 'ndp'}, {vert: 'vert'} ]}] ; ' – azmatrix

+0

@azmatrix Je voulais dire l'information réelle de parti tirée de l'API que vous utilisez pour remplir le composant. – deek