利用角13处理Get请求后的可观测性

Question

我正在尝试执行一个get请求来获取数据，然后填充一个<ul>。目前，以下代码工作正常，数据显示正确，但我正在尝试使用异步管道，因为它将自动处理订阅和取消订阅(就我理解的主题而言)：

  this.dataService.getAllCompetitions()
  .subscribe(competition=> 
    {
      this.competitions = competition;
    }); 

然后是模板：

<div class="competitions-table">
   <ul *ngFor="let comp of competitions?.data">{{comp.name}}</ul>
</div>

现在，当我尝试通过删除初始订阅并为this.competitions变量分配可观测值来实现异步管道时

this.competitions = this.dataService.getAllCompetitions();

然后，我相应地更改了模板：

<div class="competitions-table">
    <ul *ngFor="let comp of competitions?.data | async">{{comp.name}}</ul>
</div>

模板中没有显示数据，所以我不太确定我哪里出错了，也不知道我目前对实现有什么不了解。

Answer 1

由于data是从getAllCompetitions's Since `返回的对象的一部分，所以在使用它之前首先需要对其进行地图，如下所示：

this.competitions = this.dataService
  .getAllCompetitions()
  .pipe(map((res) => res.data));

然后，您可以在组件模板中使用它，如下所示：

<div class="competitions-table">
  <ul *ngFor="let comp of competitions | async">{{ comp.name }}</ul>
</div>

或者，您可以在组件模板中直接访问data，如下所示：

<div class="competitions-table">
  <ul *ngFor="let comp of (competitions | async)?.data">{{ comp.name }}</ul>
</div>