垫选带复选框

Question

我真的很想通过垫选择基本功能，但是要有复选框。如果我打开[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演示