具有非空值的角度模板编译 TS2531 错误答案

【问题标题】：Angular template compilation TS2531 error with a non-null value具有非空值的角度模板编译 TS2531 错误
【发布时间】：2020-05-06 11:57:36
【问题描述】：

使用tsconfig.json 中的"strictNullChecks": true，当我使用异步管道测试订阅到已初始化的 Observable 的同步值时，我收到 TS2531 错误（对象可能为“null”）：

import {Component} from '@angular/core';
import {Observable, of} from 'rxjs';

@Component({
    selector: 'app-root',
    template: `
        <div *ngIf="(test$|async) === 0">Zero</div>
        <div *ngIf="(test$|async) > 0">Positive</div>
    `,
    styles: []
})
export class AppComponent {
    test$: Observable<number> = of<number>(1);
}

Compilation error

有人明白为什么吗？

【问题讨论】：

使用 Observable，它将确定结果可能为空。调用 API 也一样，有些情况下 API 返回 null 值。
@HienNguyen observables 可以有明确的不可为空的类型。异步管道可能会返回 null。

标签： angular typescript

【解决方案1】：

这是由 Angular 9 的完整模板类型检查与严格的空检查和异步管道相结合引入的。基本上，异步管道假定一个可观察对象是异步的，如果是，它同时发出 null 。所以异步管道的结果可以为空，即使你知道在这种情况下它不会。

所以，并不是说test$ 可以为空，而是说(test$ | async) 的结果可以为空，严格的空检查意味着您不能将空与带有> 或< 运算符的数字进行比较这就是为什么只有那些（以及或相等的变体）会向您抛出错误的原因。

你可以用非空断言操作符告诉它闭嘴：

<div *ngIf="(test$|async)! > 0">Positive</div>

或者您可以使用新的$any 模板转换函数来禁用类型检查：

<div *ngIf="$any(test$|async) > 0">Positive</div>

或者，如果您愿意，您可以通过在 tsconfig 角度编译器选项中将 fullTemplateTypeCheck 设置为 false 来禁用模板类型检查应用程序

【讨论】：

谢谢你；这是一个很大的帮助。你知道为什么<div *ngIf="(test$|async) && (test$|async) > 0"> 不起作用吗？
angular （和 ts 就此而言）无法以这种方式推断函数结果的类型安全性......例如，如果我有一些变量 i: number | null，并且我有一些功能const isNotNull = <T>(val: T) => val !== null && val 我试图做isNotNull(i) && isNotNull(i) > 0 这也会失败，而i !== null && i > 0 会正常工作。管道只是函数
另一种方法是使用 OR 指定 null 的替代方案，例如(test$ | async) || 0

【解决方案2】：

(测试$|异步)

当您应用异步管道时，test$ 可能为 null，这就是您的原因获取对象可能是空异常。

你可以试试这个解决方案。

(test$ | 异步)? ===0

参考以下链接 https://github.com/angular/angular/issues/16982

【讨论】：