异步管道的正确方法

Question

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

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

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

这个假设是否正确？

Answer 1

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

使用订阅的可观察对象的原因：

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

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

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

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

每个示例如下：

基于订阅

TS

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;
  });
});

异步可观察管道

TS

...
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>

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

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

异步管道的正确方法

Proper approach for Async Pipe

javascript

observable

typescript

angular