Как включить, отключить кнопки в зависимости от того, какой текст нажимается?

Question

Я отображаю целые числа, которые сопоставлены с логическими типами данных.Я создал функцию щелчка, которая изменяет локальную переменную, которую я использую, чтобы привязать свойство к ней с отключенным свойством кнопки.Это работает.Если значение равно false, каждая кнопка отключена, true и каждая кнопка включена, но я хочу отключить И включить кнопку в зависимости от целого числа.

Мне нужно изменить функцию щелчка и, возможно, отображение, но я не знаю точно, что делать ..

В app.component.html у меня есть следующий код:

<p *ngFor="let item of items" (click)="buttonStatus(item)">
  {{ statusMap[item.status] }} </p>
<button [disabled]="!isValid">Button1</button>
<button [disabled]="!isValid">Button2</button>
<button [disabled]="!isValid">Button3</button>

В app.component.ts:

statusMap = {
  1: false,
  2: true,
  3: false
};

items = [{
  status: 1
}, {
  status: 2
}, {
  status: 3
}];

isValid = false;
buttonStatus(item) {
  this.isValid = this.statusMap[item.status];
}

Таким образом, каждая кнопка либо отключена, либо включена, но я хочу, чтобы некоторые из них были включены и отключены в зависимости от целого числа item.status.Например: при нажатии на элемент со статусом 1 первая и третья кнопки должны быть отключены, но вторая должна оставаться включенной.

Я ценю вашу помощь!Извините, мне пришлось отобразить «В app.component.html у меня есть следующий код:» и «В app.component.ts» из-за новой структуры на этом форуме.

Answer 1

Я не уверен, что полностью понимаю контекст вопроса.Однако это может помочь.

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

<p *ngFor="let item of items" (click)="buttonStatus(item)">
    {{ statusMap[item.status] }} </p>
<button [disabled]="{{enabler!=1}}" (click)=clickHandler(1)">Button1</button>
<button [disabled]="{{enabler!=2}}" (click)=clickHandler(2)>Button2</button>
<button [disabled]="{{enabler!=3}}" (click)=clickHandler(3)>Button3</button>

public enabler: int;
public clickHandler(selectedCheckbox: int) {
    enabler = selectedCheckbox;
}

Answer 2

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

<p *ngFor="let item of items" (click)="buttonStatus(item)">
  {{ statusMap[item.status] }} </p>
<button [disabled]="checkStatus('1')">Button1</button>
<button [disabled]="checkStatus('2')">Button2</button>
<button [disabled]="checkStatus('3')">Button3</button>

отправьте свой идентификатор кнопки или индекс, чтобы определить, нужно ли его включить или отключить.

имеет checkStatus(id) функция в компоненте для хранения логики для возврата true или false на основе предоставленного идентификатора.Сделайте так, чтобы ваш клик по кнопке установил статус, как сейчас.

checkStatus(id): boolean {
  return this.statusMap[id];
}