Angular ngFor结合async管道报参数为null类型错误的原因与解决

你的判断是正确的，该报错的触发逻辑如下：
Angular 内置的 async 管道在订阅的 Observable 未产出有效值时，会默认返回 null，而你用到的 paginate 管道要求入参必须为合法的 Collection 集合类型，不接受 null 类型输入，因此触发了类型不匹配错误。
你贴的 Subject 定义本身类型是正确的，类型不匹配的问题出在 async 管道的默认返回值逻辑上。

以下是4种常用的修复方案，你可以根据自己的业务场景选择：

• 方案1：使用非空断言（最简方案）
  直接在async管道后加TS非空断言操作符!，告诉类型校验系统你确认该位置不会出现null值，适合你确定Subject一定会在组件渲染阶段产出有效值的场景：

  <div *ngFor="let slotDay of slots | async! | paginate: { id: 'pagination', itemsPerPage: 3, currentPage: p }">
  

• 方案2：空数组兜底
  用空值合并运算符??给async管道的返回值加兜底，就算返回null也会用空数组代替，不会影响渲染逻辑：

  <div *ngFor="let slotDay of (slots | async) ?? [] | paginate: { id: 'pagination', itemsPerPage: 3, currentPage: p }">
  

• 方案3：给Subject加初始值
  把普通Subject替换为带初始值的BehaviorSubject，初始化时传入空数组，这样async管道从始至终都能拿到数组类型的值，不会出现null：

  // 把原来的Subject定义替换为以下内容
  aaa: BehaviorSubject<[string, {startTime: string, endTime: string}][]> = new BehaviorSubject([]);
  

• 方案4：ngIf前置判断
  在外层加*ngIf判断，只有async管道拿到有效值后才渲染列表区域，同时可以自定义无数据时的占位展示：

  <ng-container *ngIf="slots | async as slotList; else emptyTpl">
    <div *ngFor="let slotDay of slotList | paginate: { id: 'pagination', itemsPerPage: 3, currentPage: p }">
      <!-- 原有列表内容 -->
    </div>
  </ng-container>
  <ng-template #emptyTpl>
    <!-- 无数据时的展示内容 -->
  </ng-template>
  

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