Angular Ivy strictTemplates true 类型 'boolean | null' 不可分配给类型 'boolean'

use*_*366 13 angular angular-ivy

我已将我的应用程序更新到 9 版本。一切都很好,但我在将 strictTemplates 设置为 true 时遇到了问题。例如这段代码

loaded$: Observable<boolean>
[loaded]="loaded$ | async"
@Input() loaded!: boolean;
Run Code Online (Sandbox Code Playgroud)

我有错误类型 'boolean | null' 不能分配给类型 'boolean'。

这修复了错误

@Input() loaded!: boolean | null;
Run Code Online (Sandbox Code Playgroud)

但是我看不到有人acn解释我的意思,好吗?

bry*_*n60 26

原因是因为异步管道返回签名就像<T>(input$: Observable<T>): T | null总是一样,因为它在等待来自异步调用的响应时向模板返回 null。

更多关于这里:https : //angular.io/guide/template-typecheck#strict-null-checks

你可以做你做过的事情并允许为空,或者如果你知道它永远不会为空,请使用非空断言运算符:

[loaded]="(loaded$ | async)!"
Run Code Online (Sandbox Code Playgroud)

或在此处禁用类型检查:

[loaded]="$any(loaded$ | async)"
Run Code Online (Sandbox Code Playgroud)

或者对于这种特殊情况,您可能可以执行以下操作:

[loaded]="(loaded$ | async) || false"
Run Code Online (Sandbox Code Playgroud)

  • 最好专门解决这个问题,而不是用断言运算符或任意强制转换来掩盖它。我喜欢 `[loaded]="!!(loaded$ | async)"`,它始终是一个布尔值,比 `Boolean(x)` 短并且可以在模板中使用。 (4认同)
  • 我通常同意强制正确的类型是正确的方法(如第三个选项),因为这样你的组件永远不会收到错误的类型,但并不是每种情况都像将 null 强制为布尔值那么简单,所以我想要提供处理这种情况的所有选项 (2认同)