如何在嵌套数组场景下正确使用Angular Async Pipe？

问题背景 #

我在使用 Angular Async Pipe 处理 Observable 时遇到困难。我的 Observable 类型为 Observable<HttpResponse<Books[]>>，其中 HttpResponse 和 Book 的定义如下：

HttpResponse 类定义 #

export class HttpResponse {
  status: string | undefined;
  data: any;
  success: string | undefined;
  message: string | undefined;
}

Book 接口定义 #

export interface Book {
 id: string;
 volumeInfo: {
 title: string;
 authors: Array<string>;
};
}

不使用 Async Pipe 时，我通过订阅 Observable 并将 response.data 赋值给 books[] 变量，可正常展示书籍列表。但使用 books$ 结合 Async Pipe 时，无法正确遍历 response.data 数组，希望实现与非 Async Pipe 方式相同的展示效果。

相关组件代码 #

homepage.component.ts #

import { Component, OnInit } from '@angular/core';
import { Book } from '../../models/books';
import { BooksService } from '../../services/books.service';
import { HttpResponse } from '../../models/httpresponse';
import { Observable, of, tap } from 'rxjs';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css'],
})
export class HomepageComponent implements OnInit {
  books: Book[] = [];       // 此方式可正常工作
  books$: Observable<Book[]>;    // Async Pipe 无法正常工作

  constructor(private booksService: BooksService) {
    this.books$ = this.booksService.getBooks().pipe(
      tap((response: any) => {
        console.log(
          `homepage.component - books$ - Status: ${response.status} Success: ${response.success} Data:`,
          response.data
        );
      })
    );
  }

  ngOnInit() {
    this.booksService
      .getBooks()
      .pipe(
        tap((response: any) => {
          console.log(
            `homepage.component - books - Status: ${response.status} Success: ${response.success} Data:`,
            response.data
          );
        })
      )
      .subscribe((response: HttpResponse) => {
        response.data.forEach((val: any) => {
          this.books.push(Object.assign({}, val));
        });
      });
  }
}

homepage.component.html #

<div class="layout">
  <div>
    <h2>Books</h2>
    <p *ngFor="let b of books">
      {{ b.volumeInfo.title! }} - {{ b.volumeInfo.authors! }}
    </p>
  </div>
  <div>
    <h2>Books</h2>
    <p>Error here using async pipe?</p>
    <p>I want it to be the same as above.</p>
    <ul>
      <ng-container *ngIf="books$ | async as books">
        <li *ngFor="let b of books | keyvalue">{{ b.key }}: {{ b.value }}</li>
      </ng-container>
    </ul>
  </div>
</div>

问题分析与修复 #

核心问题 #

1. 类型不匹配：books$ 声明为 Observable<Book[]>，但当前流中传递的是完整的 HttpResponse 对象，而非 Book 数组。
2. 错误使用管道：模板中使用 keyvalue 管道遍历数组，该管道仅适用于遍历对象属性，而非数组元素。

修复代码 #

修改后的 homepage.component.ts

import { Component, OnInit } from '@angular/core';
import { Book } from '../../models/books';
import { BooksService } from '../../services/books.service';
import { HttpResponse } from '../../models/httpresponse';
import { Observable, map, tap } from 'rxjs';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css'],
})
export class HomepageComponent implements OnInit {
  books: Book[] = [];
  books$: Observable<Book[]>;

  constructor(private booksService: BooksService) {
    this.books$ = this.booksService.getBooks().pipe(
      tap((response: HttpResponse) => {
        console.log(`homepage.component - books$ - Status: ${response.status} Success: ${response.success} Data:`, response.data);
      }),
      // 关键：用 map 提取 HttpResponse 中的 data 字段，转换为 Book 数组
      map((response: HttpResponse) => response.data as Book[])
    );
  }

  ngOnInit() {
    this.booksService
      .getBooks()
      .pipe(
        tap((response: HttpResponse) => {
          console.log(`homepage.component - books - Status: ${response.status} Success: ${response.success} Data:`, response.data);
        })
      )
      .subscribe((response: HttpResponse) => {
        this.books.push(...response.data); // 简化数组赋值逻辑
      });
  }
}

修改后的 homepage.component.html

<div class="layout">
  <div>
    <h2>Books</h2>
    <p *ngFor="let b of books">
      {{ b.volumeInfo.title! }} - {{ b.volumeInfo.authors! }}
    </p>
  </div>
  <div>
    <h2>Books (Async Pipe)</h2>
    <ng-container *ngIf="books$ | async as books">
      <p *ngFor="let b of books">
        {{ b.volumeInfo.title! }} - {{ b.volumeInfo.authors! }}
      </p>
    </ng-container>
  </div>
</div>

修复说明 #

• 使用 map 操作符将流中的 HttpResponse 对象转换为 Book 数组，确保 books$ 的类型与声明一致。
• 移除模板中的 keyvalue 管道，直接用 *ngFor 遍历数组，与非 Async Pipe 方式的写法保持一致，即可实现相同的展示效果。
• 订阅部分使用扩展运算符 ... 简化数组赋值，替代原有的循环 push 逻辑。

内容的提问来源于stack exchange，提问作者Scottish Smile