修改变量值时Angular模板未同步更新如何处理？（含async/await、for循环场景）

• Angular默认的变更检测机制对引用类型（数组、对象）只会校验内存引用地址是否发生变化，你通过push方法修改arrayBouquetSrc数组内容时，数组的引用地址没有更新，所以变更检测不会触发视图重渲染。而arrayBouquetName是直接整体赋值，引用地址发生了变更，所以可以正常显示。
• 你自定义的getSrc方法存在不必要的异步嵌套，普通数组不需要用for await遍历，自行包装的Promise回调也可能因为没有被Angular的Zone.js正确接管，导致变更检测没有被自动触发。

方案1：直接替换数组引用（最简便） #

你当前的getSrc逻辑只是把arrayBouquetName的元素全量复制到arrayBouquetSrc，可以直接用解构赋值生成新数组，触发引用变更：

async ngOnInit() {
  this.email = await this.loginServise.userInfo();
  const userDoc = await this.fireStore.collection("user").doc(this.email).get().toPromise();
  this.arrayBouquetName = userDoc.get("src");
  // 直接赋值新数组，替换原有引用，自动触发变更检测
  this.arrayBouquetSrc = [...this.arrayBouquetName];
  console.log(this.arrayBouquetSrc);
}

不需要保留冗余的getSrc方法。

方案2：手动触发变更检测 #

如果业务逻辑需要保留原有数组引用，可以注入ChangeDetectorRef手动通知Angular更新视图：

1. 先导入并注入依赖：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 异步赋值完成后调用检测方法：

async ngOnInit() {
  this.email = await this.loginServise.userInfo();
  this.arrayBouquetName = await this.fireStore.collection("user").doc(this.email).get().toPromise();
  this.arrayBouquetName = this.arrayBouquetName.get("src");
  this.arrayBouquetSrc = await this.getSrc();
  // 手动标记当前组件需要更新视图
  this.cdr.markForCheck();
  console.log(this.arrayBouquetSrc);
}

方案3：使用Angular原生async管道（推荐写法） #

更符合Angular开发规范的做法是直接把异步流交给模板的async管道处理，不需要手动管理Promise等待和变更检测：
TS代码：

import { switchMap, map } from 'rxjs';

// 定义异步流
userBouquetSrc$ = this.loginServise.userInfo().pipe(
  switchMap(email => this.fireStore.collection("user").doc(email).get()),
  map(doc => doc.get('src'))
);

模板代码：

<div id="canvas-my-bouquet">
    <div id="container-my-bouquet">
        check it : {{userBouquetSrc$ | async}}
    </div>
</div>

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