我无法异步运行用 Angular 创建的 2 个复选框

Question

我有 2 个复选框，当我单击其中一个时，它应该为“true”，另一个为“false” 因此，如果选中其中一项，则必须取消选中另一项。我不应该同时检查两者。

      <div class="export-content">
        <input style="margin-right: 5px;" type="checkbox" value="1" [(ngModel)]="dataModal.analysis">
        <span>{{'EXPORTER.analysis' | translate}} </span>
      </div>
      <div class="export-content">
        <input style="margin-right: 5px;" type="checkbox" value="2" [(ngModel)]="dataModal.pressAnalysis">
        <span>{{'EXPORTER.pressAnalysis' | translate}} </span>
      </div>

   <button type="button" class="btn btn-sm btn-outline-primary" (click)="selectedDocumentsExpoertClick()">
      Print
  </button> 

这部分是我的html代码。

这部分是我的 ts 代码；

selectedDocumentsExpoertClick() {
    if (this.dataModal.analysis) {
       print details...
}
if (this.dataModal.pressAnalysis) {
  print details...
}

Answer 1

我有 2 个复选框，当我单击其中一个时，它应该为“true”，另一个为“false”

要获得确切的行为，您应该使用单选按钮而不是复选框。复选框用于选择多个值，因此当您单击某个框时，其他框将继续使用先前的值。

1. 添加导入以使用响应式表单到 app.module.ts

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule, <---
    ReactiveFormsModule, <---
    ....
  ])

2. 初始化组件中的表单

    import { FormControl, FormGroup } from '@angular/forms';
    
    ......
    export class YourComponent implements OnInit {
         public form: FormGroup = new FormGroup({
                typeAnalysi:new FormControl('option1') //Option selected by default
         });
       ....

       onAnalysiSelected(typeAnalysi:string){
          console.log(typeAnalysi)
       }

       onSubmit(formValue:any){
          console.log(formValue)
       }
    }

3. 将表单添加到 HTML your.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div>
  <label for="typeAnalysi">Type Analysis</label>
  <div>
    <label for="option1">
      Option 1
      <input (ngModelChange)="onAnalysiSelected(form.controls['typeAnalysi'].value)" id="option1" type="radio" name="typeAnalysi" formControlName="typeAnalysi" value="option1">
    </label>
    <label for="option2">
      Option 2
      <input (ngModelChange)="onAnalysiSelected(form.controls['typeAnalysi'].value)" id="option2" type="radio" name="typeAnalysi" formControlName="typeAnalysi" value="option2" />
    </label>
  </div>
</div>
</form>