en mi aplicación, muestro una lista de apelaciones, con su estado (que se muestra con el ícono de tapete). Aquí hay una parte de mi plantilla.
<div class="approve-detail" fxLayout="column" fxLayoutGap="10px"> <p>Created: {{absDetail?.reqDate|date:'d. L. y HH:mm'}}</p> <ng-container *ngIf="absDetail?.defList"> <mat-list > <mat-list-item class="def-item" *ngFor="let def of absDetail.defList"> <mat-icon matListIcon *ngIf="def.idReject!=0" class="warn" matTooltip="Rejected">thumb_down</mat-icon > <mat-icon matListIcon *ngIf="def.idApprove!=0&&def.idReject==0" class="success" matTooltip="Approved">thumb_up</mat-icon> <mat-icon matListIcon *ngIf="def.idReject==0 && def.idApprove==0" matTooltip="Waiting">help</mat-icon> <p matLine>{{def.name}}</p> </mat-list-item> </mat-list> <mat-list *ngIf="abs | isDeleteAppealed:absDetail.defList"> <mat-list-item class="def-item" *ngFor="let def of absDetail.defList"> <mat-icon matListIcon *ngIf="def.idCancel<0" color="warn" matTooltip="Rejected">thumb_down</mat-icon > <mat-icon matListIcon *ngIf="def.idCancel>0" class="success" matTooltip="Approved">thumb_up</mat-icon> <mat-icon matListIcon *ngIf="def.idCancel==0" matTooltip="waiting">help</mat-icon> <p matLine>{{def.name}}</p> </mat-list-item> </mat-list> </ng-container> </div>Funciona, pero está un poco sucio con todos esos ng-ifs, ¿hay alguna forma más elegante de hacer esto? Estaba pensando en la tubería, pero necesito generar tres propiedades dinámicas para cada elemento: clase, información sobre herramientas y nombre de icono adecuado, por lo que no parece una mejor solución. ¿Algunas ideas? ¿Qué tal algún tipo de directiva?
Una opción que podría hacer es envolverlos en un componente separado. Use su let def como un parámetro @Input(). Cuando se establece, puede cambiar automáticamente el valor de la clase/información sobre herramientas/icono. Algo como esto:
abs-icono.componente.ts
imports... @Component({ selector: 'abs-icon', templateUrl: './abs-icon.component.html', styleUrls: ['./abs-icon.component.css'] }) export class AbsIconComponent implements OnInit { public cls: string; public tooltip: string; public icont: string; private _abs: any; get abs(): any{ return this._abs; } @Input() set abs(value: any) { this._abs = value; if (_abs.idReject != 0) { cls = "warn"; tooltip = "Rejected"; icont = "thumb_down" } else if (.......do the rest){ /* some code */ } } constructor() { } ngOnInit(): void { } }abs-icono.componente.html
<mat-icon matListIcon class="{{cls}}" [matTooltip]="tooltip"> {{icon}} </mat-icon >usándolo:
<abs-icon [abs]="def"> </abs-icon>