2017-10-21 54 views
0

J'ai un composant avec ce codeangulaire 2 propriété complexe interpolation

<tr *ngFor="let row of dataset"> 
    <td *ngFor="let column of columns">{{row[column.value]}}</td> 
</tr> 

la propriété de l'objet est affiché correctement si la column.value a une valeur simple, mais il ne semble pas si la valeur a une valeur complexe telle comme property.nestedproperty.

Comment puis-je résoudre le problème?

Merci.

+0

Pourriez-vous expliquer ce que vous essayez d'atteindre, à un niveau supérieur? Pourquoi avoir des modèles aussi dynamiques? D'où viennent ces valeurs de colonne? –

+0

Vous pouvez créer un tuyau. –

Répondre

0

J'ai fait face à ce problème plusieurs fois, la meilleure façon de contourner cela est de déclarer une méthode dans le composant dire getColumnValue() où vous calculez et mettez toute la logique. Dans votre classe de composant ..

getColumnValue(){ 
    //logic to get the column value 
    return value 
} 

lient cette méthode à l'attribut innerHtml de <td> Ainsi, au lieu de

<td *ngFor="let column of columns">{{row[column.value]}}</td> 

Utilisez

<td *ngFor="let column of columns" [innerHtml]="getColumnValue()"> </td> 

C'est le moyen le plus simple obtenir autour, d'autres méthodes incluent la création d'un composant ou d'une directive générique ou d'un composant enfant, etc. Mais croyez-moi ce qui précède est le moyen le plus clair et le plus concis.