带布尔值的角度复选框答案

【问题标题】：Angular checkbox with boolean带布尔值的角度复选框
【发布时间】：2021-01-29 19:00:47
【问题描述】：

我正在开发一个需要授予使用管理员权限的 Angular 项目。 isAdmin 是一个布尔值（假/真）。但它无法弄清楚如何将正确的值解析到组件并保存该值。

<div class="checkbox">
   <label>
     <input type="checkbox" name="isAdmin" [(ngModel)]="user.isAdmin" [checked]="item.checked">
     Is Admin?
   </label>
</div>

component.ts 看起来像这样：

this.userForm.get('isAdmin').valueChanges.subscribe(val => {
  this.newUser.isAdmin = !!val;
});

谁能看出我的错误是什么？

【问题讨论】：

标签： angular typescript checkbox

【解决方案1】：

在您的 html 中，您使用的是 template based forms。但在您的 ts 中，您使用的是 Reactive forms 方法。

因此，您应该更改您的 HTML 以使用响应式表单方法，如下所示：

<div class="checkbox">
   <label>
     <input type="checkbox" name="isAdmin" [formControl]="userForm.get('isAdmin')" [checked]="item.checked">
     Is Admin?
   </label>
</div>

【讨论】：