Angular4: отключить кнопку в ngFor после нажатия

Question

У меня есть <button> в цикле ngFor, и я хочу, чтобы он был отключен после того, как пользователь нажмет на кнопку.Для каждого элемента цикла есть кнопка, поэтому я должен различать их, используя разные логические значения для каждого из них.

Вот фрагмент кода из HTML:

<div class="card" *ngFor="let i of items">
    <button type="button" [disabled]="'btn' + i.id" (click)="btn + i.id=true">TEST</button>
<div>

Часть [disabled]="'btn' + i.id", кажется, работает, но я не могу установить ее значение на true, используя (click)="btn + i.id=true".Как я могу объединить btn и i.id и установить для него значение true?

Любая помощь приветствуется!

Answer 1

Проанализируйте ниже код

<div class="card" *ngFor="let i of items">
  <button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>

Вот как это должно быть реализовано в Angular.

Если вы хотите знать, какая кнопка нажимается в вашем компоненте. Затем добавьте 'clicked' свойство в массиве items , а затем использовать его в компоненте.

Answer 2

Код с головы (могут быть ошибки):

В вашем компоненте .ts используйте массив:

buttons = Array(10).fill(false); // e.g. 10 = size of items

В вашем шаблоне:

<div class="card" *ngFor="let i of items; index as j">
    <button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>

index as j работает на Angular 5/6, для более низкой версии используйте let j=index

Альтернативное решение

Добавить к элементам поле отключено и использовать это поле напрямую:

<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>