Question

我正在使用ngFor生成一堆按钮，并希望提升活动按钮。我已经实现了一个函数，该函数将告诉您是否需要启用或禁用按钮，现在我正在尝试这样做：

  <mat-button-toggle 
        [ngClass]="isButtonDisabled(button.authLevel, button.id) ? '' : 'mat-elevation-z5'"
        *ngFor="let button of buttonsFromApi" 
        id="{{button.id}}" class="problemButton" 
        [disabled]="isButtonDisabled(button.authLevel, button.id)">
        {{button.displayName}}
      </mat-button-toggle>

但是，这将不起作用，所有按钮将平放。 mat-elevation-z5已正确导入，因为我正在确实以适当的高度显示的另一个元素上使用它。

Answer 1

尝试这样

<mat-button-toggle-group name="fontStyle" aria-label="Font Style">

    <mat-button-toggle [ngClass]="{'mat-elevation-z5':!btn.disabled }" 
                     *ngFor="let button of buttonsFromApi" id="{{button}}"
                     class="problemButton" [disabled]="isButtonDisabled(button)" #btn>
        {{button}}
    </mat-button-toggle>

</mat-button-toggle-group>

我对按钮（btn）使用模板引用，这将阻止调用 isButtonDisabled两次

demo ??

使用ngFor和ngClass应用高程垫高

1 个答案: