Mat-select中*ngFor无法显示数组内容，如何等待数据加载完成？

针对你遇到的paisOps数组在页面加载时为空，导致*ngFor无法渲染国家选项的问题，可通过以下方式处理：

1. 确保数据就绪后再处理数组 #

如果this.lngCountries是通过异步请求（比如HTTP接口）获取的，必须在数据完全返回后再调用preparePaisOpts函数，而不是在组件初始化时直接执行。示例：

// 假设你通过服务获取国家数据
this.yourCountryService.fetchCountries().subscribe({
  next: (data) => {
    this.lngCountries = data; // 先赋值异步获取的对象
    this.preparePaisOpts(); // 数据就绪后再转换为数组
  },
  error: (err) => console.error('获取国家数据失败', err)
});

2. 优化数组转换函数 #

可以用Object.values简化转换逻辑，同时增加空值判断避免报错：

private preparePaisOpts() {
  if (!this.lngCountries) {
    this.paisOps = [];
    return;
  }
  this.paisOps = Object.values(this.lngCountries);
}

3. 避免空数组渲染问题 #

在模板中增加空值判断，确保数组存在后再渲染选项：

<th2-mat-select class="form-field-dark" required [form]="usecaseForm"
    formControlFieldName="pais" 
    placeholder="País">
    <!-- 用paisOps || []确保数组为空时不报错，数据加载后自动更新 -->
    <mat-option *ngFor="let country of paisOps || []" [value]="country">{{country}}</mat-option>
</th2-mat-select>

也可以在外层容器添加*ngIf="paisOps"，防止组件在数据未就绪时提前渲染。

内容的提问来源于stack exchange，提问作者Oscar Moreno