单击后角度禁用按钮？

Question

我有多个按钮我试图在获得响应后禁用该按钮.在获得响应后使用ngClass禁用按钮

<tr *ngFor="let item of data">

  <td>{{item.username}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.phone}}</td>
                   <td><button  type="button" [ngClass]="{disabled : item.username === name }" (click)="changestatus(item.username)" class="btn btn-success btn-xs" >Change Status</button></td>

</tr>

而我的changestatus功能

public name : string ;

 changestatus(username : string){

         this.httpService.changeuserstatus({uname : username }).subscribe(data => {

           this.name = (data.data == 1) ? username : "no";

         })

  }

我将用户名值分配给name变量,如果两者匹配,我将禁用该按钮

问题是如果我在获得响应后点击第一个按钮它被禁用但是当我点击第二个按钮后获得响应第一个按钮被启用而第二个按钮被禁用.但是需要禁用这两个按钮.提前谢谢你

Answer 1

@ maciej-caputa关于使用[disabled]而不是类是正确的,但是您的错误实际上是由于您的应用程序逻辑.

您的函数changestatus()更新全局变量this.name.这将影响所有行,因为它们的disabled状态是有条件的'item.username === name'

尝试以下方法 - 我假设它item是一种叫做的类型User(你需要添加一个新属性isDisabled:

模型:

export class User {
  username: string;
  name: string;
  email: string;
  phone: string;
  isDisabled: boolean;
}

component.html:

<tr *ngFor="let item of data">
    <td>{{item.username}}</td>
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td><button  type="button" [disabled]="item.isDisabled" (click)="changestatus(item)" class="btn btn-success btn-xs" >Change Status</button></td>
</tr>

component.ts:

    changestatus(user: User){
        this.httpService.changeuserstatus({uname : user.username }).subscribe(data => {
            user.isDisabled = (data.data == 1);
        });
    }

非常简单的plunkr展示了一个工作版本:https://plnkr.co/edit/quLBCMoFtragJ32OBTvp

Answer 2

要真正禁用按钮，您需要disabled在按钮元素上使用属性，否则您只能更改样式但仍然可以单击它。在 angular2 中，您可以按如下方式绑定到一个属性。

<button [disabled]='item.username === name'></button>