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"部分似乎有效，但我无法将其值设置为trueusing (click)="btn + i.id=true"。我如何可以连接的btn，并i.id与它的值设置为true？

任何帮助表示赞赏！

Answer 1

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

在您的 .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 jAngular 5/6 上的作品，供低版本使用let j=index

替代方案

添加到禁用的项目字段并直接使用该字段：

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