Angular 角度4：单击后禁用ngFor中的按钮

我在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”

部分似乎工作正常，但我无法使用

（单击）=“btn+i.id=true”

将其值设置为

true

。如何连接

btn

和

I.id

并将其值设置为true

感谢您的帮助

来自head的代码（可能有bug）：

在.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>

分析下面的代码

试验

这就是如何在Angular中实现它

如果您想知道在组件中单击哪个按钮。然后添加“单击” 属性，然后在组件中使用它

---

汉克斯！就像我希望的那样。

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

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