带有异步管道的Angular ngFor，告诉参数具有空类型答案

【问题标题】：Angular ngFor with async pipe, tells argument has null type带有异步管道的Angular ngFor，告诉参数具有空类型
【发布时间】：2021-11-18 18:53:26
【问题描述】：

此消息的原因是什么

Argument of type '[string, { startTime: string; endTime: string; }][] | null' is not assignable to parameter of type 'Collection<unknown>'.

当我尝试在ngFor 循环中使用async 管道时：

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

插槽为：

aaa: Subject<[string, {startTime: string, endTime: string}][]> = new Subject();

这是否意味着 Angular 猜测 Subject 可以返回一个空值？如何解决这个问题？

谢谢！

【问题讨论】：

Subject<x> 到底是什么？你能显示它的代码吗？显然，x 和 Collections<Unknown> 之间存在类型不匹配
谁能告诉我这是什么类型的数组[string, {startTime: string, endTime: string}][]

标签： angular typescript async-pipe

【解决方案1】：

检查您的管道paginate 此管道应作为参数 null 或数组获取并返回一个数组（如果需要，则为空）。您可以编辑添加分页管道的问题吗？

您也可以尝试分两步制作您的代码

<ng-container *ngIf="slots|async as slotsAsync">
   <div *ngFor="let slotDay of slotsAsync | 
           paginate: { id: 'pagination', itemsPerPage: 3, currentPage: p }">
    ...
   </div>
</ng-container>

注意：对于a convention，作为 observables 的变量以 $ 结尾，stols$ 比 slot 更好（这不是强制性的，但有助于理解任何人）

【讨论】：