Tengo el siguiente código:
<td *ngFor="let prop of props" [ngClass] = "{ componentClasses[prop]: true }" > Something </td>Las clases de componentes se ven así:
componentClasses = {'id': 'class1', 'name': 'class2', 'salary': 'class3'};this.props se ve así:
this.props = ['id', 'name', 'salary'];¿Por qué quiero hacer esto? Para que no codifique cada clase. En su lugar, lo automatizaría, lo cual es útil si tiene una tabla grande con diferentes propiedades css.
El problema es:
Esta sintaxis no funciona. A ngClass no parece gustarle este tipo de estructura dentro de object[prop]: .
Probé el siguiente código también, pero sin ningún éxito.
'`$(componentClasses[prop])$`': verdadero
en html usamos accesorios solo no this.props
<td *ngFor="let prop of props" [ngClass] = "{ componentClasses[prop]: true }" > Something </td>moverlo a los ts? Además, usar ngFor dará como resultado múltiples td
<td [ngClass] = "classNames" > Something </td> componentClasses = {'id': 'class1', 'name': 'class2', 'salary': 'class3'} props = ['id', 'name', 'salary'] get classNames(){ return this.props.reduce((acc,key)=>acc[componentClasses[key]]=true,{}) }o
componentClasses = {'id': 'class1', 'name': 'class2', 'salary': 'class3'} props = ['id', 'name', 'salary'] get classNames(){ return this.props.map((key)=>componentClasses[key]) }tienes un código [ngClass]="componentClasses[prop]"
ACTUALIZAR: pasarlo como una matriz:
[ngClass]="[componentClasses[prop], componentClasses[prop] + '1' ]"