带复选框的垫选

Question

我真的想要 mat-select 基本功能，但带有复选框。 如果我打开 [multiple] 我会得到复选框，但我也会得到多选功能，我需要单选和复选框。

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演示