Angular4:单击后禁用ngFor中的按钮 [英] Angular4: Disable button in ngFor after click

问题描述

我在ngFor循环中有一个<button>，我希望在用户单击按钮后将其禁用.循环的每个元素都有一个按钮，因此我必须为每个元素使用不同的布尔值来区分它们.

I have a <button> in a ngFor loop and I want it to be disabled after the user clicks on the button. There is a button for each element of the loop so I have to differentiate them using a different boolean value for each of them.

这是html中的代码段:

Here is a code snippet from the 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?

The [disabled]="'btn' + i.id" part seems to work, but i cant set the value of it to true using (click)="btn + i.id=true". How can I concatenate the btn and i.id and set the value of it to true?

感谢您的帮助！

推荐答案

从头开始的代码(可能有错误):

Code from head (can have bugs):

在.ts组件中使用数组:

In your .ts component use array:

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

The index as j works on Angular 5/6, for lower version use let j=index

禁用添加到项目"字段，然后直接使用该字段:

Add to items field disabled and use that field directly:

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

这篇关于Angular4:单击后禁用ngFor中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！