Блог

Я пытаюсь выяснить, как получить выбранные значения из группы флажков Angular (7) Material.

Допустим, у меня есть область в форме «вкусы» и 3 флажка со значениями «шоколад», «ваниль» и «клубника».

 <h3>Flavors</h3>
<mat-checkbox value="chocolate">Chocolate</mat-checkbox>
<mat-checkbox value="vanilla">Vanilla</mat-checkbox>
<mat-checkbox value="strawberry">Strawberry</mat-checkbox>
  

Поскольку флажки установлены и выключены, я хочу обновить переменную (модель) «flavorsAvailable».

Это просто сделать с помощью mat-radio-groups, поскольку это просто ngModel для элемента group. Но как мне управлять флажками?

Примечание: я не хочу использовать угловой список выбора материала; это только для форм.

@Steve, список выбора материала, который вы можете использовать [(ngModel)]=»переменная» [FormControl]=»управление» или в форме, formGroupName=»свойство». В любом случае вы получаете массив с выбранными параметрами. Я не представляю лучшего способа управления флажком.

Ну, вы можете использовать mat-check самостоятельно, это только use [(ngModel)] . например, если у вас есть массив логических значений. Да, не имеет смысла [значение] в mat-check-box, единственными допустимыми значениями являются: true или false

 variable:boolean[]=[]
  

Вы можете использовать

 <mat-checkbox [(ngModel)]="variable[0]" value="chocolate">Chocolate</mat-checkbox>
<mat-checkbox [(ngModel)]="variable[1]" value="vanilla">Vanilla</mat-checkbox>
<mat-checkbox [(ngModel)]="variable[2]" value="strawberry">Strawberry</mat-checkbox>
{{variable|json}}
  

Посмотрите, поможет ли это вам:

 flavorsAvailable: any[] = [
    { 'id': '0', 'name': 'chocolate' },
    { 'id': '1', 'name': 'vanilla' }
];

getCheckeds(ev): any[] {
  return this.flavorsAvailable.filter(x => x.state = ev.target.checked);
}
  

Если это тот тип списка, который вы упомянули в «Я не хочу использовать список выбора Angular Material; это только для forms.«. Them, это не имеет смысла, вам нужно будет выбирать один за другим в 3 разных ngModels…