Angular 2在允许复选框之前验证数据

Question

我有一个带有复选框的表单，供管理员编辑用户。用户对象具有布尔对象isAdmin。我希望阻止用户修改自己的帐户，但仍允许他们查看值，但无论我做什么，我都无法阻止复选框检查。数据未提交（正确），因此刷新页面有效，但我正在尝试利用双向绑定。

我的组件方法：

updateUser(event, key, user) {
  if (user.$key !== this.currentUserId) {
    console.log('updating');
    this.loginService.updateUser(user.$key, key, event.checked);
  } else {
    // somehow don't allow the checking of the box?
  }
}

我的HTML：

<md-card class="responsive-card">
    <md-card *ngFor="let user of (users$ | async)">
        <md-card-content>
          <!-- checkbox here -->
        </md-card-content>
    </md-card>
</md-card>

尝试1：

<md-checkbox [(ngModel)]="user.isAdmin" name="isAdmin" (change)="updateUser($event, 'isAdmin', user)" #isAdmin>
        Admin
</md-checkbox>

尝试2（我想，也许只是单向绑定？）：

<md-checkbox [ngModel]="user.isAdmin" name="isAdmin" (change)="updateUser($event, 'isAdmin', user)">
        Admin
</md-checkbox>

尝试3（绑定到checked属性？）：

<md-checkbox [attr.checked]="user.isAdmin" name="isAdmin" (change)="updateUser($event, 'isAdmin', user)">
        Admin
</md-checkbox>

问题的Visual Gif（顶级用户不应该允许我修改它）：

Answer 1

您应该使用checked属性绑定而不是attr.checked。您的isAdmin也应免费报价

<md-checkbox [checked]="user.isAdmin" name="isAdmin" (change)="updateUser($event, isAdmin, user)">
        Admin
</md-checkbox>

Answer 2

我认为你必须使用[checked] =＆＃34; user.isAdmin＆＃34;而不是[attr.checked]，即

<md-checkbox [checked] = "user.isAdmin" name = "isAdmin" (change) = "updateUser($event, 'isAdmin', user)">
   Admin
</md-checkbox>