从 spécifique mat-option 中删除 mat-pseudo-checkbox

Question

在 Angular Material 中，mat-select 具有元素 mat-pseudo-checkbox，它在 mat-option 中显示复选图标。我有多个垫选择，我想删除或隐藏此元素。

与

::ng-deep .mat-pseudo-checkbox{
  display: none!important;
}

我可以隐藏这个。但我想隐藏这个只是为了像这样的一个垫子选择

  <mat-form-field class="user-list">
      <mat-select class="selectAll">
         @for (user of userLists; track user) {
            <mat-option [value]="user.id">{{user.name}}</mat-option>
         }
      </mat-select>
  </mat-form-field>

Answer 1

我们可以设置

panelClass

，它只会将样式应用于特定的选择，下面的工作示例！

Mat Select API

HTML

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple panelClass="no-checkbox">
    <mat-select-trigger>
      {{toppings.value?.[0] || ''}} @if ((toppings.value?.length || 0) > 1) {
      <span class="example-additional-selection">
        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ?
        'other' : 'others'}})
      </span>
      }
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

TS

import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

/** @title Select with custom trigger text */
@Component({
  selector: 'select-custom-trigger-example',
  templateUrl: 'select-custom-trigger-example.html',
  styleUrl: 'select-custom-trigger-example.css',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatSelectModule,
    FormsModule,
    ReactiveFormsModule,
  ],
})
export class SelectCustomTriggerExample {
  toppings = new FormControl('');

  toppingList: string[] = [
    'Extra cheese',
    'Mushroom',
    'Onion',
    'Pepperoni',
    'Sausage',
    'Tomato',
  ];
}

Stackblitz 演示