有人可以让这个 Angular 16 复选框输入代码更高效、更干净吗？

Question

我的 Angular 16 ts 组件中有一个简单的布尔值

uploadEnabled

。我想要的是如果

uploadEnabled

为 true 则选中复选框，反之亦然。当我单击复选框时，我希望

uploadEnabled

根据复选框的状态进行相应切换。我有一个标签元素，显示

uploadEnabled

的当前状态。

下面的代码可以实现我想要的功能，但它显然很笨拙，因为我使用两个输入元素和

*ngIf

来使

checked

属性存在或不存在。 （为了便于阅读，我已删除

class

属性。）

      <form >
        <input type="checkbox" (click)="uploadEnabled = !uploadEnabled" *ngIf="!uploadEnabled" />
        <input type="checkbox" (click)="uploadEnabled = !uploadEnabled" *ngIf="uploadEnabled" checked />
        <label >Allow PHG to perform FHIR/PCD01 uploads:
          {{uploadEnabled}}</label>
      </form>

下面的变体完成了一半的工作。第一次查看时，该复选框将被选中或取消选中，具体取决于布尔值，但单击该复选框会将复选框设置为选中（如果未选中），否则它只会保持选中状态。然而，布尔值会根据需要切换：

        <input type="checkbox"
          (click)="uploadEnabled = !uploadEnabled" [checked] = "uploadEnabled" />
        <label >Allow PHG to perform FHIR/PCD01 uploads:
          {{uploadEnabled}}</label>

我尝试了“[(ngModel)]”和“(change)”的其他变体，但要么出现编译错误（我在严格模式下使用 Angular 16），要么无法在复选框状态和多变的。最后，我试图在

checked

为 false 时消除

uploadEnabled

属性，并在

uploadEnabled

为 true 时让它存在。

Answer 1

事实证明，有一个 Angular 指令 [(ngModel)] 可以做到这一点：

<span>
  <input type="checkbox" [(ngModel)]="advanced.retrieveStoredMeasurements" [ngModelOptions]="{standalone: true}">
  <label> Automatically retrieve stored measurements</label>
</span>

advanced.retrieveStoredMeasurements 是布尔值。为了便于阅读，我删除了类属性。