Использование ngFor и ngClass для применения возвышения

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 дважды

демо??