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

#angular #angular-material

#angular #angular-материал

Вопрос:

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

Читая API на веб-сайте Angular Material checkbox API, я смог найти свойство ‘value’, которое может присваивать строку этому флажку … но как я могу привязать это к моей переменной?

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

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

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

1. Кажется странным получать строку из checkbox. Если это отключено, какое значение вы получите? Null?

2. нет, переменная — это просто пустая строка, «»

3. наконец, checked атрибут может быть только true / false

Ответ №1:

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

 <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
}

1. итак … невозможно привязать переменную непосредственно к значению? хм…

2. я ожидал, что у этого будет простое решение… потому что в моем случае у меня есть форма с минимум 10 флажками…

Ответ №2:

Все флажки в моем бэкэнде получают ‘Y’ или ‘N’, поэтому мне пришлось сделать это:
Удалить [(ngModel)] и создать функцию для всех флажков

 <mat-checkbox name="active" [checked]="model.active === 'Y'" (change)="checkboxChange($event);" > Click me </mat-checkbox>

component.ts

 checkboxChange( event ){
   let name = event.source.name;
   this.model[name] = event.checked ? 'Y' : 'N';
}

Ответ №3:

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

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