коврик с флажками

Question

Я действительно хочу базовую функциональность mat-select, но с флажками. Если я включаю [несколько], я получаю флажки, но я также получаю функцию множественного выбора, мне нужен один выбор и флажок.

Answer 1

вы можете достичь своих требований, как это,

вот пример,

в app.component.html

<mat-form-field>
    <mat-select placeholder="Toppings">
        <mat-option *ngFor="let topping of toppingList; let i =index" [value]="topping">
            <mat-checkbox [checked]="selected === i" (change)="onChange(topping);selected = i"> {{topping}}</mat-checkbox>
        </mat-option>
    </mat-select>
</mat-form-field>

и app.component.ts

export class AppComponent {
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage'];
  selected = -1;

  /*checkbox change event*/
  onChange(event) {
    console.log(event)
  }
}

вот Stackblitz демо