在角度组件中操作复选框道具

Question

我正在尝试在选中另一个复选框时更改复选框选中状态。在我看来它工作正常，但我可以在 chrome 检查工具中看到 ng-reflect-model="true" 应该不是。这是我的代码示例

component.html

<input type="checkbox" [checked]="isCustomer" (change)="isCustomerChange()" [(ngModel)]="user.isCustomer" [formControl]="registrationForm.controls['isCustomer']" id="isCustomerId" class="accountType" name="accountType">
  <label for="isCustomer" class="checkboxLabel">
    <span></span>
     Customer Account
  </label>
<input type="checkbox" [checked]="isStore" (change)="isStoreChange()" [(ngModel)]="user.isStore"[formControl]="registrationForm.controls['isStore']" id="isStoreId" class="accountType" name="accountType">
  <label for="isStore" class="checkboxLabel">
    <span></span>
    Store Account
  </label>

组件.ts

export class RegisterComponent implements OnInit {
  isStore: boolean = false;
  isCustomer: boolean = false;

  isCustomerChange() {
    this.isCustomer = !this.isCustomer;
    this.user['isCustomer'] = this.isCustomer;
    this.isStore = false;
  }

  isStoreChange() {
    this.isStore = !this.isStore;
    this.user['isStore'] = this.isStore;
    this.isCustomer = false;
  }
}

单击商店时，我希望客户未选中（实际上是这样），并且客户选中状态为假（仍然为真）。我怎样才能达到这个结果？

Answer 1

认为我需要以这种方式对ngModel 进行更改

isCustomerChange() {
  this.isCustomer = !this.isCustomer;
  this.user['isCustomer'] = this.isCustomer;
  this.user.isStore = false;
}

isStoreChange() {
  this.isStore = !this.isStore;
  this.user['isStore'] = this.isStore;
  this.user.isCustomer = false;
}