异步管道的正确方法答案

【问题标题】：Proper approach for Async Pipe异步管道的正确方法
【发布时间】：2021-12-02 09:33:40
【问题描述】：

我正在构建一个 Angular 应用程序并尝试尽可能使用 async 管道来处理 Observable 订阅。

我仍然很确定我应该在什么时候以及为什么使用它，大多数时候我已经看到，如果我不需要对即将到来的数据进行任何更改，我就可以使用它并显示数据原样；但是如果我需要事先对任何数据进行处理，我应该手动订阅我的打字稿代码并在显示之前处理那里的所有内容。

因此，例如，如果我有一个对象数组，并且我需要在对象的一个属性中操作一个字符串，最好手动订阅、处理响应然后在我的模板中显示它。

这个假设正确吗？

【问题讨论】：

标签： javascript angular typescript observable

【解决方案1】：

我在组件中使用了这两种类型的 observables，这就是我的原因（可能还有其他我不知道的）：

使用订阅 observable 的原因：

手动控制订阅和取消订阅。
在内部使用之前同步组件内数据的加载和操作。
当订阅的数据在组件内部（非可视化）使用时，例如服务或计算。

使用异步可观察管道的原因：

订阅和取消订阅 observables 是自动处理的。
在 HTML 模板中使用之前同步组件内数据的加载和操作。
如果有许多 HTML 元素依赖于订阅的数据，并且您希望在组件销毁后自动释放订阅。

在这两种情况下，您都可以在使用前在组件中加载和操作订阅的数据。

每个示例如下：

基于订阅

someData: SomeClass[] = [
  { id: 1, desc: 'One', data: 100 },
  { id: 2, desc: 'Two', data: 200 },
  { id: 3, desc: 'Three', data: 300 }
];
someData$: Observable<SomeClass[]>;

this.someData$ = of(this.someData).subscribe((res) => {
  this.someData = res.map((r) => {
    r.data = Math.floor(r.data * 1.1);
    return r;
  });
});

异步可观察管道

...
someData: SomeClass[] = [];
someData$: Subscription;

this.someData$ = of(this.someData).pipe(
  map((res) => {
    res.map((r) => {
      r.data = Math.floor(r.data * 1.1);
    });
    return res;
  })
);

HTML（两个选项）

<li *ngFor="let data of someData$ | async">
  Item={{ data.desc }}. Value={{ data.data }}
</li>

总而言之，任一选项的使用取决于组件的复杂性、类型（可视或非可视）以及您希望如何管理订阅的内存管理。

原问题的答案是否定的，在涉及计算/预处理时手动订阅不一定更好。你也可以使用异步管道来做同样的事情，就像我在上面两个等效示例中展示的那样。

【讨论】：

这太棒了！谢谢，我想有办法像这样利用异步管道，只是没有清晰的画面