使用Angular 13处理后的可观察到可观察的请求

Question

我正在尝试提出获取数据的请求，然后填充＆lt; ul＆gt;。当前，以下代码可以正常显示，但我正在尝试使用异步管，因为它将自动处理订阅和取消订阅（据我了解该主题）：

  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的可观察到的对象的一部分，因此，您需要 map 首先使用它，如以下内容：

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>

---

或者，您可以访问>数据直接在组件模板中，如下：

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