Отключить / включить несколько кнопок внутри ngFor с условием ngIf

Question

У меня есть список кнопок, которые необходимо включить / отключить в зависимости от условия, две или три кнопки могут быть отключены.

<li *ngFor="let button of buttons; let i = index">
   <button *ngIf="disableButtonIndex  && i+1 == disableButtonIndex" class="btn btn-lg btn-primary" disabled> {{ button.title }}</button>
   <button *ngIf="!(disableButtonIndex  && i+1 == disableButtonIndex)" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

.ts

this.disableButtonIndex = 1;

Приведенный выше код отлично работает для отключения одной кнопки. Как отключить две или более кнопок

Answer 1

Вы можете использовать массив, чтобы сохранить отключенные индексы или добавить флаг отключения в опцию вашей кнопки.

Использовать отключенный массив

https://stackblitz.com/edit/angular-sef3nc?file=src%2Fapp%2Fapp.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  disabledButtons= [1, 2]

  buttons = [
    {
      actionName: 'action1',
      title: 'button1'
    },
    {
      actionName: 'action2',
      title: 'button2'
    },
    {
      actionName: 'action3',
      title: 'button3'
    }
  ]

  callAction(action) {
    console.log(action)
  }
}

<li *ngFor="let button of buttons; let i = index">
   <button class="btn btn-lg btn-primary" 
           [disabled]="disabledButtons.indexOf(i) !== -1"
           (click)="callAction(button.actionName)"> 
           {{ button.title }}
   </button>
</li>

Используйте флаг в опции

https://stackblitz.com/edit/angular-zvbepr?file=src%2Fapp%2Fapp.component.html

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  buttons = [
    {
      actionName: 'action1',
      title: 'button1',
      disabled: true
    },
    {
      actionName: 'action2',
      title: 'button2',
      disabled: true
    },
    {
      actionName: 'action3',
      title: 'button3',
      disabled: false
    }
  ]

  callAction(action) {
    console.log(action)
  }
}

<li *ngFor="let button of buttons; let i = index">
   <button class="btn btn-lg btn-primary" 
           [disabled]="button.disabled"
           (click)="callAction(button.actionName)"> 
           {{ button.title }}
   </button>
</li>

Answer 2

Я думаю, что ваша проблема с кнопками следующей итерации внутри элемента li.

Вы можете сохранить все индексы отключенных кнопок в массиве и проверить, существует ли текущий индекс в массиве.

<li *ngFor="let button of buttons; let i = index">
   <button [disabled]="disableButtonArr.indexOf((i+1)) === -1" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

Answer 3

вместо * ngЕсли вы можете использовать [disabled] = "expressionToEvaluate"

<li *ngFor="let button of buttons; let i = index">
   <button [disabled]="disableButtonIndex  && i+1 == disableButtonIndex" class="btn btn-lg btn-primary"> {{ button.title }}</button>
   <button [disabled]="!(disableButtonIndex  && i+1 == disableButtonIndex)" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>