Angular Material mat-select初始不显示mat-select-trigger内容求助

问题分析 #

使用带mat-select-trigger的多选mat-select时，组件初始化阶段mat-select-trigger内的内容不会自动渲染，仅在手动选择下拉选项后才会显示。默认情况下mat-select未选值时会隐藏触发器内容、仅展示占位符，无法满足用mat-chip展示已保存选项的需求。

解决方案 #

1. 初始化FormControl的初始值 #

确保组件的FormControl在初始化时就设置好之前保存的已选选项值，这是触发器能渲染初始值的核心前提。

2. 绑定FormControl值到Trigger并渲染Mat-Chip #

在mat-select-trigger中直接循环FormControl的value，渲染对应的mat-chip，同时实现移除选项的逻辑。

完整代码示例 #

HTML模板

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      <div class="chips">
        @for (topping of toppings.value; track topping) {
          <mat-chip (removed)="removeTopping(topping)">
            {{ topping }}
            <button matChipRemove>
              <mat-icon>remove_circle_outline</mat-icon>
            </button>
          </mat-chip>
        }
      </div>
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
      <mat-option [value]="topping">{{ topping }}</mat-option>
    }
  </mat-select>
</mat-form-field>

TypeScript代码

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'select-custom-trigger-example',
  templateUrl: 'select-custom-trigger-example.html',
  styleUrls: ['select-custom-trigger-example.css'],
})
export class SelectCustomTriggerExample {
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
  // 初始化时设置已选值，模拟之前保存的数据
  toppings = new FormControl(['Mushroom', 'Onion']);

  removeTopping(topping: string): void {
    const currentValue = this.toppings.value || [];
    const index = currentValue.indexOf(topping);
    if (index >= 0) {
      currentValue.splice(index, 1);
      this.toppings.setValue([...currentValue]);
    }
  }
}

样式调整（可选）

给芯片容器添加样式优化排列效果：

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

关键说明 #

• 直接绑定toppings.value到触发器循环，确保初始值加载时就能渲染对应芯片
• 移除选项时通过修改FormControl的value同步组件状态，保证触发器内容实时更新
• 复用FormControl的值作为渲染数据源，减少冗余状态变量

内容的提问来源于stack exchange，提问作者kiarash malekzadeh