angular материал мат-кнопка-группа-переключатель по умолчанию не установлен как неопределенный

Question

Мне нужен компонент с тремя состояниями для поиска и значением по умолчанию как undefined. поэтому я использую mat-button-toggle-group, но значение по умолчанию не влияет на дизайн компонента.

html:

<mat-button-toggle-group 
[(ngModel)]="myValue" 
[value]="myValue" aria-label="Font Style">
  <mat-button-toggle [value]="1">Bold</mat-button-toggle>
  <mat-button-toggle [value]="undefined">Italic</mat-button-toggle>
  <mat-button-toggle [value]="0">Underline</mat-button-toggle>
</mat-button-toggle-group>
{{'myValue:'+myValue}}

ts:

  myValue:number;

stackblitz

кто-нибудь может мне помочь?

Answer 1

Вы заметили, что значение undefined рассматривается как строка. И myValue тип number.

<mat-button-toggle-group 
 value="undefined"
 (change)="myValue = $event ? $event.value : undefined"
 aria-label="Font Style">
  <mat-button-toggle [value]="1">Bold</mat-button-toggle>
  <mat-button-toggle value="undefined">Italic</mat-button-toggle>
  <mat-button-toggle [value]="0">Underline</mat-button-toggle>
</mat-button-toggle-group>
{{'myValue:'+myValue}}

Answer 2

Проверьте это: https://stackblitz.com/edit/angular-yw9zyq-o1glji

<mat-button-toggle-group name="fontStyle" 
#group="matButtonToggleGroup" 
[value]="2" aria-label="Font Style">
  <mat-button-toggle [value]="1">Bold</mat-button-toggle>
  <mat-button-toggle [value]="2">Italic</mat-button-toggle>
  <mat-button-toggle [value]="0">Underline</mat-button-toggle>
</mat-button-toggle-group>
{{'myValue:'+group.value}}

И не используйте undefined в качестве значения. Вы можете использовать любой другой номер или значение.