Как привязать флажок к строковому значению в Angular7?

Question

<input pInputText type="checkbox" [(ngModel)]="rowData.active"> active - строка.Это значение «true» или «false».Я хочу связать это строковое значение с флажком.Так как я могу это сделать?

Answer 1

не использовать "банановый синтаксис"

<input type="checkbox" 
  [ngModel]="rowData.active=='true'?true:false"
  (ngModelChange)="rowData.active=$event?'true':'false'"
>

Answer 2

В html

<input type='checkbox' [(ngModel)]='rowData.active'>

в тс

 rowData={'active' : true}

Рабочая StackBligz

Если вы используете primeng, ref PrimeNg

Answer 3

Если вы используете <input type="checkbox">, то для связывания можно использовать следующий синтаксис:

<input
    type="checkbox"
   [checked]="(rowData.active === 'true') ? true : false"
   (change)="rowData.active = $event.target.checked"
/>

<p> rowData.active {{ rowData.active }}</p>

TypeScript:

rowData = {active: 'true'};

Answer 4

Вам нужно будет добавить атрибут binary="true" в ваш HTMLElement.

Насколько я понимаю, вы используете флажок primeng.Таким образом, код должен быть таким -

<p-checkbox [(ngModel)]="rowData.active" binary="true"></p-checkbox>

Для более подробной информации прочитайте всю документацию здесь -

• https://www.primefaces.org/primeng/#/checkbox