Может ли кто-нибудь сделать этот входной код флажка Angular 16 более эффективным и чистым?

Question

У меня есть простое логическое значение в моем компоненте angular 16 ts. Я хочу, чтобы флажок был установлен, если это правда, и наоборот. Когда я нажимаю на флажок, я хочу соответственно переключить его в зависимости от состояния флажка. У меня есть элемент метки, показывающий текущее состояние .

Следующий код делает то, что я хочу, но он явно неуклюж, поскольку я использую два элемента ввода и*ngIfчтобы атрибут присутствовал или отсутствовал. (я удалил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атрибут, когда является ложным, и чтобы он присутствовал, когдаuploadEnabledправда.

Answer 1

Оказывается, существует директива Angular [(ngModel)], которая делает именно это:

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

Advanced.retriveStoredMeasurements — это логическое значение. Я убрал атрибуты класса для удобства чтения.