Angular中Material下拉框选中时加载展示数据的实现问题

我明白你的需求：只有当用户点击打开Material下拉框时，才去加载数据并展示选项。你之前的尝试问题出在事件绑定的时机不对，以及一些模板语法的小错误，下面给你一步步解决：

问题根源分析 #

• 你用(change)或(selectionChange)都是在用户选中某个选项后才触发，而不是打开下拉框的瞬间
• 模板里的value="option.value"是字符串绑定，不是变量绑定，应该用[value]="option.value"
• 初始时returnQrCodes$如果是undefined，async管道不会生效，最好初始化为空的Observable

正确实现方案 #

1. 组件类代码调整

首先，初始化returnQrCodes$为空的Observable，然后修改getQrCodes方法（可以加个加载状态防止重复请求）：

import { Observable, empty } from 'rxjs';
// ...

returnQrCodes$: Observable<any[]> = empty();
isLoading = false;

ngOnInit() {
  // 这里不需要提前加载数据
}

getQrCodes() {
  if (this.isLoading) return; // 防止重复触发请求
  this.isLoading = true;
  this.returnQrCodes$ = this.qrDefinitonService.getDefinitionForSelection().pipe(
    tap(() => this.isLoading = false),
    tap(console.log)
  );
}

2. 模板代码修改

使用MatSelect的openedChange事件，这个事件会在下拉框打开的瞬间触发，完美符合你的需求：

<div class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch)">
  <mat-select 
    placeholder="Opties" 
    name="option" 
    [(ngModel)]="selectedValueOptie"
    (openedChange)="getQrCodes()"
  >
    <!-- 可选：加载状态提示 -->
    <mat-option *ngIf="isLoading" disabled>加载中...</mat-option>
    <!-- 正确绑定value，用[]包裹变量 -->
    <mat-option 
      *ngFor="let option of returnQrCodes$ | async" 
      [value]="option.value"
    > 
      {{ option.qrCode }} 
    </mat-option>
  </mat-select>
</div>

为什么之前的写法无效？ #

• 第一种写法：[(ngModel)] = "getQrCodes"完全错误，ngModel需要绑定一个变量，而不是函数
• 第二种写法：(selectionChange)是选中选项后才触发，不是打开下拉框的时机，不符合你的需求
• 第三种写法：(change)其实是selectionChange的别名，同样是选中后触发，而且初始returnQrCodes$为undefined，async管道不会订阅，第一次打开时即使调用了getQrCodes，可能也不会立即更新视图

这样修改后，用户每次点击打开下拉框时，就会触发数据加载，加载完成后通过async管道自动渲染选项，还加了加载状态提升用户体验~

内容的提问来源于stack exchange，提问作者mightycode Newton