3

我有<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"。如何连接btnandi.id并将其值设置为 true?

任何帮助表示赞赏!

4

2 回答 2

5

头部代码(可能有错误):

在您的 .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>
于 2018-11-13T08:46:00.397 回答
1

分析以下代码

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

这就是它应该在 Angular 中实现的方式。

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

于 2018-11-13T08:59:22.423 回答