自定义mat-select添加周范围后，关闭下拉框无法显示选中内容求助

核心问题分析 #

你的mat-select关闭后仍显示占位符，主要原因是**mat-select-trigger使用了静态文本**，没有关联到动态的选中范围数据；另外不必要的compareWith配置也可能干扰组件的选中状态识别。

具体修复步骤 #

1. 动态更新mat-select-trigger内容

将硬编码的asda替换为动态渲染选中范围的逻辑，直接使用selectedWeeks数组或表单控件的值：

<mat-select-trigger>
  {{ selectedWeeks.length > 0 ? selectedWeeks.map(w => `${w.from} - ${w.to}`).join(', ') : 'Selecteer week' }}
</mat-select-trigger>

这样当选中范围变化时，触发器会自动更新显示内容，空状态下显示默认提示文本。

2. 移除无效的compareWith配置

你的fakeWeekRange函数并未正确实现选项值对比逻辑，反而可能导致组件无法识别选中状态，直接从mat-select标签中删除该绑定：

<!-- 移除 [compareWith]="fakeWeekRange" -->
<mat-select [formControl]="weekRangeSelect">

同时可以删除TS代码中无用的fakeWeekRange函数。

3. 优化删除按钮的点击行为

为删除按钮添加事件阻止冒泡，避免点击时触发选项选中逻辑（导致下拉框意外关闭）：

<button mat-icon-button (click)="removeWeekRange(i); $event.stopPropagation()">
  <mat-icon>delete</mat-icon>
</button>

完整修复后的代码片段 #

HTML部分

<mat-form-field appearance="outline" class="mat-form-field-header-filter">
  <mat-label>Selecteer week</mat-label>
  <mat-select [formControl]="weekRangeSelect">
    <mat-select-trigger>
      {{ selectedWeeks.length > 0 ? selectedWeeks.map(w => `${w.from} - ${w.to}`).join(', ') : 'Selecteer week' }}
    </mat-select-trigger>
    <mat-option class="week-selector" (click)="$event.preventDefault()" disabled>
      <span>Van</span>
      <span class="input">
        <input matInput type="text" min="1" max="52" #weekFrom>
      </span>
      <span>tot</span>
      <span class="input">
        <input matInput type="text" min="1" max="52" #weekTo>
      </span>
      <span>week(s)</span>
      <button mat-button color="primary" (click)="addWeekRange()">Add</button>
    </mat-option>
    <mat-option class="meAN"筑">往复式(S laying函ph余人house友谊                *ngIf="weekInvalidRange">
      Invalid range provided!
    </mat-option>
    <mat-option class="week-warn" disabled *ngIf="weekAlreadyAddedRange">
      Range already added!
    </mat-option>
    <ng-container *ngFor="let weeks of selectedWeeks; let i = index">
      <mat-option class="week-remove-selector">
        <span>
          {{ weeks.from }} - {{ weeks.to }}
        </span>
        <span>
          <button mat-icon-button (click)="removeWeekRange(i); $event.stopPropagation()">
            <mat-icon>delete</mat-icon>
          </button>
        </span>
      </mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

TS部分（删除无用函数）

@ViewChild('weekFrom', {static: true}) weekFrom: ElementRef<HTMLInputElement>;
@ViewChild('weekTo', {static: true}) weekTo: ElementRef<HTMLInputElement>;

public selectedWeeks: { from: number; to: number }[] = [];
public weekInvalidRange: boolean = false;
public weekAlreadyAddedRange: boolean = false;
public weekRangeSelect: FormControl = new FormControl<string>('');

addWeekRange(): void {
  const from: number = parseInt(this.weekFrom.nativeElement.value, 10),
    to: number = parseInt(this.weekTo.nativeElement.value, 10);
  let add: boolean = true;
  if (from !== null && to !== null && !isNaN(from) && !isNaN(to) && typeof from !== 'undefined' && typeof to !== 'undefined') {
    this.selectedWeeks.forEach((r: { from: number, to: number }): void => {
      if (from < 1 || to > 52 || from > to) {
        add = false;
        this.weekInvalidRange = true;
        setTimeout((): boolean => this.weekInvalidRange = false, 5000);
      } else if (from <= r.to && r.from <= to) {
        add = false;
        this.weekAlreadyAddedRange = true;
        setTimeout((): boolean => this.weekAlreadyAddedRange = false, 5000);
      }
    });
    if (add) {
      this.selectedWeeks.push({
        from: parseInt(this.weekFrom.nativeElement.value, 10),
        to: parseInt(this.weekTo.nativeElement.value, 10)
      });

      this.weekFrom.nativeElement.value = '';
      this.weekTo.nativeElement.value = '';
    }
  }
  this.selectedWeeks = this.selectedWeeks.sort((a, b) => a.from - b.from);
  this.weekRangeSelect.setValue(this.selectedWeeks.map(d => d.from + '-' + d.to).join(', '));
}

removeWeekRange(index: number): void {
  this.selectedWeeks.splice(index, 1);
  this.weekRangeSelect.setValue(this.selectedWeeks.map(d => d.from + '-' + d.to).join(', '));
}

formatSuspectDropdown(result: any): string {
  return result !== null && typeof result === 'object' ? result.name : result;
}

修复原理 #

• mat-select-trigger是自定义下拉框关闭后显示内容的核心组件，通过绑定selectedWeeks数组实现动态渲染
• 移除无效的compareWith避免组件选中状态识别混乱
• 事件阻止冒泡防止絲 entirely身负gen（功用& selecting_n_the coverage

内容的提问来源于stack exchange，提问作者Kristjan O.