我在ngFor循环中有一个<button>
,我希望在用户单击按钮后将其禁用。循环的每个元素都有一个按钮,所以我必须为每个元素使用不同的布尔值来区分它们。
以下是来自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"
部分似乎可以工作,但我无法使用(click)="btn + i.id=true"
将其值设置为true
。如何连接btn
和i.id
并将其值设置为true?
感谢您的帮助!
来自头部的代码(可能有错误(:
在.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>
分析以下代码
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>
这就是它在Angular中的实现方式。
如果您想知道在组件中单击了哪个按钮。然后在项数组中添加"clicked">属性,然后在组件中使用它。