Angular： *NGIF使用与异步管的con缩示例失败

Question

如果我有一个可观察的随着时间的推移释放值：

values$ = from([1, 2, 3, 'done'])
  .pipe(
    concatMap((x) => of(x).pipe(delay(1000)))
  );

并且我有一个函数返回对该可观察的：

getOutputs(): Observable<'done' | number> {
    return this.values$;
  }

并通过函数订阅observable在模板中使用*NGIF和async：

<div *ngIf="getOutputs() | async as val">
  <hello name="{{ val }}"></hello>
</div>

预期行为：浏览器显示'Hello 1！'，'Hello 2！'，'Hello 2！'，'Hello 3！'，'您好！'，大约一秒钟的间隔。

相反，如果我将最新值存储在caping ubyubject中，并通过该cravive umagiSubject在ngoninit中循环所有值：

outputs$ = new BehaviorSubject<number | 'done' | null>(null);

ngOnInit(): void {
    this.subscriptions.add(
      from<[number, number, number, 'done']>([
        1,
        2,
        3,
        'done',
      ]).subscribe((val) => this.outputs$.next(val))
    );
  }

当然，该行为是不同：这些值全部都发送到cistionUbject，输出$ .VALUE非常快地变为“完成”。因此，以后出现的任何事情都只会“完成”。也期望。

'Hello hello！

getOutputs(): Observable<null | 'done' | number> {
    return this.outputs$;
  }

如果我更改getOutputs（）以使用this.outputs $而不是 >较早使用的是：

getOutputs(): Observable<null | 'done' | number> {
    return this.outputs$
    .pipe(
      concatMap((x) => of(x).pipe(delay(1000)))
    );
  }

“完成”一遍又一遍地发送，一秒钟（可以通过tap（Console.log））看到，但是模板什么也没显示。这是出乎意料的：我认为HTML会显示“你好！”。

为什么会发生这种情况？

参见这个stackblitz 。

Answer 1

Tl; dr

这是由角度处理变化检测方式引起的。

Angular将定期检查您的视图是否与模型中的数据有关，实际上每秒都连续调用您的getOuputs（）方法！

---

简而言之，Angular的更改检测

考虑您的app.component.html模板：

<div *ngIf="getOutputs() | async as val">
  <hello name="{{ val }}"></hello>
</div>

在这里，Angular将定期重新评估getOutputs（）|异步，“几次”，直到您的应用程序处于稳定状态。

但是，对于每次评估，您都将返回新的，唯一的 可观察到的，因为您 create 的getOutputs方法中：

public getOutputs(): Observable</* ... */> {
  return this.outputs$.pipe(
     concatMap(x => of(x).pipe(delay(1000))),
  ); // it's not `this.outputs
Tl; dr
这是由角度处理变化检测方式引起的。
 Angular将定期检查您的视图是否与模型中的数据有关，实际上每秒都连续调用您的 getOuputs（）方法！

简而言之，Angular的更改检测
考虑您的 app.component.html 模板：
<div *ngIf="getOutputs() | async as val">
  <hello name="{{ val }}"></hello>
</div>

在这里，Angular将定期重新评估 getOutputs（）|异步，“几次”，直到您的应用程序处于稳定状态。
但是，对于每次评估，您都将返回新的，唯一的 可观察到的，因为您 create      的 getOutputs 方法中：
, it's a **new Observable**
}

的在您

 export class AppComponent implements OnInit, OnDestroy {
   private subscriptions = new Subscription();
   private outputs$ = new BehaviorSubject</* ... */>(null);
+  private actualOutputs$ = this.outputs$.pipe(
+    concatMap(x => of(x).pipe(delay(1000))),
+  );

   public getOutputs(): Observable</* ... */> {
+    return this.actualOutputs$;
-    return this.outputs$.pipe(
-       concatMap(x => of(x).pipe(delay(1000))),
-    );
   }
 }

可观察 ，对此感到抱歉...）

...那么您的申请将完全按照您的期望！

---

还有更多的探索

，但是为什么要删除延迟，但每次都会产生不同的可观察到的呢？

让我们考虑getOutputs下面的替代实现：

public getOutputs(): Observable</* ... */> {
  return this.outputs$.pipe(
    concatMap(x => of(x)/* .pipe(delay(1000)) */), // no more delay here
  ); // that's a **new** Observable every time.
}

这是因为我（故意