angular - 具有 Angular 自定义逻辑的动态按钮(单击)

Question

我有一些按钮存储在数据库中。

但我不知道如何使用(click)

例如，我有一个“关闭”按钮，单击它会将 bool 值设置为 false isVisible = false

型号:

export interface Button {
    label: string;
    class: string;
    iconClass: string;
    doJob: any;
}

模板:

<p-footer *ngIf="hasPopupButtons()">
    <a (click)="doStuff(button.doJob)" *ngFor="let button of Buttons" [ngClass]="button.class"><i
            [ngClass]="button.iconClass"></i>{{button.label}}</a>
</p-footer>

点击功能:

doStuff(dostuff: any) {
    //??
}

我怎样才能优雅地做到这一点？

Answer 1

您可以将属性 doJob 作为您要调用的“函数”

 let button = {
        label: "Your Label";
        class: "your-class",
        iconClass: "your-icon-class,
        doJob: () => this.doStuff('doStuff')
 }

模板:

<a (click)="button.doJob()" *ngFor="let button of Buttons" [ngClass]="button.class"><i
            [ngClass]="button.iconClass"></i>{{button.label}}</a>