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>

Answer 3

HTML：

<button type="button"
        (click)="changestatus(item.username)"
        [disabled]='isDisabled(item)' 
        class="btn btn-success btn-xs">Change Status</button>

TS：

isDisabled(item) : boolean {
 return item && item.username === name;
}

单击后角度禁用按钮？

3 个答案: