Question

在上面的屏幕截图中，我想在用户获得批准后禁用批准按钮（即，该按钮向右滑动）。单击按钮会调用一个API，该API更新DB中的is_confirm字段（布尔类型），并且使用相同的字段来禁用该按钮。但是该按钮并未被禁用，仍然可以滑动。

<tr *ngFor="let user of users">
    <td>{{ user.name }}</td>
    <td>{{ user.userName }}</td>
    <td>{{ user.occupation }}</td>
    <td>{{ user.maritalStatus }}</td>
    <td>{{ user.mobileNo }}</td>
    <td>
        <div class="row">
            <div class="col-sm-4"><button class="btn"(click)="viewUserDetails(user.id)"><i class="fa fa-address-card fa-lg" aria-hidden="true"></i></button></div>
            <div class="col-sm-4"><label class="switch">
                    <input type="checkbox" [disabled]="user.isConfirm" [checked]="user.isConfirm" (change)="approveUserById(user.id)">
                    <span class="slider round"></span>
            </label></div>
            <div class="col-sm-4"><button class="btn" (click)="lockOrUnlockUserById(user)"><i [ngClass]="user.isLock ? 'fa fa-unlock fa-lg' : 'fa fa-lock fa-lg'" aria-hidden="true"></i></button></div>
        </div>
    </td>
</tr>

Component.ts

//Method to get all the users called in onInit

  viewUsersList(roleId: string) {
    
    let cityObj = {roleId:roleId,cityId:this.selectedCity}
    
    this.httpClient.post('USER_LIST_API', cityObj).subscribe(
        (responseData: any) => {
          this.users = <ViewUser[]>responseData
          console.log("Response Data: ",responseData)
          console.log(this.users)
        },
        (error: any) => {
          console.log(error)
          this.router.navigate(['error']);
        }
      )
  }

  //Method to approve a user

  approveUserById(userId: string) {

    this.httpClient.post('APPROVE_USER_API', userId).subscribe(
      (responseData: any) => {
        if (responseData.message === 'TRUE') {
            
            //*This is the place I need help to refresh the data *
          console.log("Response ",responseData)
        }
      }
    )

Answer 1

尝试 [disabled] =“！user.isConfirm”

 <input type="checkbox" [disabled]="!user.isConfirm" [checked]="user.isConfirm" (change)="approveUserById(user.id)">
                    <span class="slider round"></span>
```

Answer 2

尝试： <button [disabled]="!is_confirm" ...>

如何动态禁用表中的按钮？

2 个答案: