在div上用async pipe正常，ng-template上使用ngFor async pipe失效求助

先看你代码里的一个明显问题——第一个<mat-option>里用了{{ c.name }}，但根本没有定义c变量（没有对应的*ngFor循环），这会直接导致模板解析错误，不管你用ng-container还是ng-template都会出问题。先把这个问题修正，再结合<ng-template>的特性来解决异步循环的问题：

1. 先修复模板变量引用错误 #

把第一个<mat-option>里的{{ c.name }}替换成正确的变量，比如如果item里包含客户端名称，就改成{{ item.clientName }}；如果需要循环客户端列表，就补充对应的*ngFor：

<!-- 示例：假设item里有clientName属性 -->
<mat-option>{{ item.clientName }}</mat-option>

2. 正确在<ng-template>上使用*ngFor+async管道 #

<ng-template>上使用结构型指令的语法和ng-container基本一致，但要注意异步流的空值保护（避免数据流未发出值时模板报错）：

<ng-template 
  *ngFor="let item of (portfolios$ | async) || []; let index = i"
>
  <mat-form-field class="col-6">
    <mat-label>Select Client</mat-label>
    <mat-select formControlName="clientID" (selectionChange)="changeClient($event.value)">
      <mat-option>{{ item.clientName }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="col-6">
    <mat-label>Select Portfolio</mat-label>
    <mat-select formControlName="portfolioID" (selectionChange)="updateFormValuesToStore($event)">
      <mat-option *ngFor="let c of item.Portfolio">
        {{ c.portfolioName }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-template>

这里(portfolios$ | async) || []的作用是：如果portfolios$还没发出值（或者发出null/undefined），就用空数组兜底，避免模板因无数据而崩溃。

3. 确保异步数据流正确初始化 #

在组件里要保证portfolios$这个Observable有初始值，避免async管道一直处于等待状态：

import { startWith, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

// 组件内定义数据流时添加初始值和错误处理
portfolios$: Observable<YourPortfolioType[]> = this.yourDataService.getPortfolios().pipe(
  startWith([]), // 初始发出空数组，确保模板一开始就有循环基础
  catchError(() => of([])) // 捕获错误，返回空数组避免视图崩溃
);

4. 检查表单控件的绑定问题 #

你循环生成的多个mat-select都用了相同的formControlName（clientID、portfolioID），这会导致表单控件冲突——多个控件绑定到同一个表单控制对象，状态会异常，也可能引发视图渲染问题。

如果是动态生成表单组，应该用FormArray来管理：

import { FormBuilder, FormArray } from '@angular/forms';

// 组件内定义FormArray
portfolioFormArray = this.fb.array([]);

constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 监听portfolios$的变化，同步更新FormArray
  this.portfolios$.subscribe(portfolios => {
    this.portfolioFormArray.clear();
    portfolios.forEach(() => {
      this.portfolioFormArray.push(
        this.fb.group({
          clientID: [''],
          portfolioID: ['']
        })
      );
    });
  });
}

然后模板里绑定到FormArray的索引：

<ng-template 
  *ngFor="let item of (portfolios$ | async) || []; let index = i"
>
  <div [formGroupName]="index">
    <!-- 这里的formControlName就会绑定到FormArray对应索引的表单组内 -->
    <mat-form-field class="col-6">
      <mat-label>Select Client</mat-label>
      <mat-select formControlName="clientID" (selectionChange)="changeClient($event.value)">
        <mat-option>{{ item.clientName }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field class="col-6">
      <mat-label>Select Portfolio</mat-label>
      <mat-select formControlName="portfolioID" (selectionChange)="updateFormValuesToStore($event)">
        <mat-option *ngFor="let c of item.Portfolio">
          {{ c.portfolioName }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</ng-template>

5. 可选：用<ng-template>的原始指令写法 #

如果你不想用语法糖*ngFor，可以用<ng-template>的原始指令绑定方式，逻辑完全等价，但能更清晰看到绑定关系：

<ng-template 
  ngFor 
  let-item 
  [ngForOf]="portfolios$ | async" 
  let-index="index"
>
  <!-- 你的表单内容 -->
</ng-template>

内容的提问来源于stack exchange，提问作者Sridhar Natuva