首页 文章

单击后角度禁用按钮？

提问于
浏览 次
3

我有多个按钮我试图在获得响应后禁用该按钮 . 在获得响应后使用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变量，如果两者匹配，我将禁用该按钮

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

angular typescript

3 回答

  • 0

    @ 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

    回复于
  • 4

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

    <button [disabled]='item.username === name'></button>
    回复于
  • 2

    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;
}
    回复于

相关问题