Angular模板如何避免重复编写(observable$ | async)且不触发变更检测错误

方案1：使用Angular 17+原生@let模板声明（最推荐，无额外依赖） #

Angular 17及以上版本原生支持在模板中直接用@let声明变量，不需要搭配任何条件指令，完美适配你的需求：

@let observable = store.observable$ | async;

<div class="column">
  <div class="row">
      <mat-select
        name="selectField"
        [options]="someOptions"
        [value]="observable?.selectFieldValue"
        [required]="true"
      >
      </mat-select>
      <mat-input
        name="inputField"
        [required]="true"
        [value]="observable?.inputfieldValue"
      >
      </mat-input>
      <mat-input
        name="otherInputField"
        [required]="true"
        [value]="observable?.otherInputFieldValue"
      >
      </mat-input>
      ...
  </div>
</div>

该方式不会触发变更检测错误，变量声明独立，不需要依赖*ngIf的条件渲染逻辑。

方案2：使用@ngrx/component提供的*ngrxLet指令 #

如果你使用的是低于17的Angular版本，且项目已经引入了NgRx相关依赖，可以用*ngrxLet指令，专门用于解决*ngIf存储async变量会隐藏内容、触发变更检测错误的问题：

<ng-container *ngrxLet="store.observable$ as observable">
<div class="column">
  <div class="row">
      <mat-select
        name="selectField"
        [options]="someOptions"
        [value]="observable.selectFieldValue"
        [required]="true"
      >
      </mat-select>
      <!-- 其余控件直接用observable变量即可 -->
      ...
  </div>
</div>
</ng-container>

*ngrxLet不会因为observable初始值为null/undefined就隐藏内部内容，也不会触发你之前遇到的变更检测错误。

方案3：组件类内订阅存储到实例属性 #

如果你不想改动模板语法，也可以在组件类里直接订阅这个observable，把结果存到普通实例属性里，注意搭配销毁逻辑避免内存泄漏：

// 组件类代码
private destroy$ = new Subject<void>();
observable: MyStoreClass | null = null;

ngOnInit() {
  this.store.getObservableInfo();
  this.store.observable$
    .pipe(takeUntil(this.destroy$))
    .subscribe(res => this.observable = res);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

模板里就可以直接用observable变量：

<mat-select
  name="selectField"
  [options]="someOptions"
  [value]="observable?.selectFieldValue"
  [required]="true"
>
</mat-select>

方案4：改用响应式表单，直接在类内赋值 #

如果你的表单可以改成Angular响应式表单，完全可以把值绑定的逻辑移到组件类里，模板不需要写任何async相关的代码：

// 组件类
form = this.fb.group({
  selectField: ['', Validators.required],
  inputField: ['', Validators.required],
  otherInputField: ['', Validators.required]
});

ngOnInit() {
  this.store.getObservableInfo();
  this.store.observable$
    .pipe(takeUntil(this.destroy$))
    .subscribe(res => {
      this.form.patchValue(res);
    });
}

模板直接和formControl绑定即可，不需要手动写value属性：

<mat-select
  name="selectField"
  [options]="someOptions"
  formControlName="selectField"
>
</mat-select>
<mat-input
  name="inputField"
  formControlName="inputField"
>
</mat-input>

这种方式是Angular表单的最佳实践，还能统一处理表单校验、值变化监听等逻辑。

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