Javascript 角度2允许前验证数据复选框

我有一个表单，上面有一个复选框，管理员可以编辑用户。用户对象有一个布尔对象

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（我想，也许只是单向绑定？）

管理

尝试3（绑定到选中的属性？）：

管理

问题的可视gif（顶级用户不允许我修改）：

---

您应该使用

checked

属性绑定，而不是

attr.checked

。您的

isAdmin

也应该没有引号

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

管理

我认为您必须使用[checked]=“user.isAdmin”而不是[attr.checked]，也就是说

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

管理

首先，不应该。也许这不是最好的方法，但由于我正在对

验证的
元素重用此方法，因此我需要区分这两种方法。该方法运行良好，但检查并不反映模型。第二，这个解决方案不起作用。你能创建一个plunker来复制相同的吗？我会尝试。。。我在使用plunker方面很糟糕。我在输入中添加了
[disabled]=“isCurrentUser（user.$key）”
。。。这可能是最好的方法，但我想我想知道在允许复选框检查自己之前如何检查一些东西。看看这篇文章是否有用。这是另一个选项，但单击似乎也会在禁用的元素上发生。否，禁用复选框时不会发生单击事件。单击似乎会在禁用时触发。我的新想法是用一个承诺和一个观点来看待孩子，但你的回答对阿拉文德来说毫无意义，也不起作用。
<md-checkbox [checked]="user.isAdmin" name="isAdmin" (change)="updateUser($event, isAdmin, user)">
        Admin
</md-checkbox>

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