как связать строку с помощью mat-checkbox

Question

Я использую в своем приложении какой-то флажок mat и не знаю, как получить строку из флажка вместо логического значения.

Чтение API на веб-сайте API флажкового материала Angular Material Я мог бы найти свойство 'value', которое может связать строку с этим флажком ... но как я могу связать это с моей переменной?

Я пытаюсь что-то вроде этого.

<mat-checkbox color="warn" value="Hello" [(ngModel)]="myString"> Hello </mat-checkbox>

но моя переменная получает логическое значение ... как я могу это сделать?

Answer 1

Привязка к флажку ngModel всегда будет возвращать проверенное состояние (истина / ложь / неопределенность).Если вы хотите получить свойство value из флажка, вы можете добавить событие изменения к элементу, например,

<mat-checkbox color="warn" value="Hello" [(ngModel)]="myString"  (change)="onChange($event)"> Hello </mat-checkbox>

и в свой компонент ts

onChange(event: any)
{
  console.log(event.source.value); // will contain "hello"
  console.log(event.source.checked); // will contain the checked state of the checkbox
}

Answer 2

Вы можете использовать свойство name для хранения строкового значения вместо ngModel.

<mat-checkbox [(ngModel)]="isChecked"                                                                                    
       name="{{checkboxStringValue}}">//make sure name is unique for every item
        </mat-checkbox>