基于状态动态创建的垫子图标

Question

在我的应用程序中，我显示上诉列表，其状态（使用垫子图标显示）。这是我的模板的

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

工作原理，但是对所有ng-ifs有点脏，还有其他优雅的方法可以做到这一点吗？我在考虑管道，但是我需要为每个元素生成三个动态属性：类，工具提示和正确的图标名称，因此它似乎不是一个更好的解决方案。有什么想法吗？那某种指令呢？

Answer 1

您可以做的一个选项是将它们包裹在单独的组件中。使用您的令def 作为@input（）参数。设置时，您可以自动更改类/工具提示/图标的值。这样的东西：

abs-icon.component.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-icon.component.html

<mat-icon matListIcon 
    class="{{cls}}" 
    [matTooltip]="tooltip">

{{icon}}

</mat-icon >

使用它：

<abs-icon [abs]="def"> </abs-icon>