Angular Ошибка компиляции шаблона TS2531 с ненулевым значением

Question

С "strictNullChecks": true в tsconfig.json, когда я тестирую синхронное значение, подписывающееся на инициализированную Наблюдаемую с асинхронным c каналом, я получаю ошибку TS2531 (объект, возможно, 'нулевой'):

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);
}

Ошибка компиляции

Кто-то понимает почему?

Answer 1

это вводится полными проверками типов шаблонов angular 9 в сочетании со строгими проверками нуля и асинхронным c конвейером. в основном, канал asyn c предполагает, что наблюдаемое будет асинхронным, и если это так, то оно тем временем выдает ноль. Таким образом, результат asyn c pipe МОЖЕТ быть нулевым, даже если вы знаете, что в этом случае его не будет

так, это не означает, что test$ может быть нулевым, оно говорит, что результат (test$ | async) может быть нулевым, а строгие проверки на ноль означают, что вы не можете сравнить ноль с числом с > или < операторов, поэтому только те (и их варианты) выдают ошибку.

Вы можете сказать ей, чтобы она закрылась с помощью оператора ненулевого утверждения:

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

или вы можете использовать новую функцию приведения шаблона $any, чтобы отключить проверку типов:

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

, или, если вы sh, вы можете отключить приложение проверки шаблонов в целом, установив fullTemplateTypeCheck в false в вашем параметре компилятора tsconfig angular

подробнее здесь: https://angular.io/guide/template-typecheck#strict -null-проверок

Answer 2

(тест $ | asyn c)

, поскольку вы применяете асинхронный c канал, скорее всего, тест $ может быть нулевым, поэтому вы получаете объект, возможно, нулевое исключение.

вы можете попробовать это решение.

(test $ | asyn c)? === 0

См. Ссылку ниже https://github.com/angular/angular/issues/16982