Angular 为什么在if分支中会出现“可能为null”错误？

我们已经在中启用了

该组件有一个简单的可观察的：

导出类示例组件{
obs$=的({
道具：12
}).管道（延迟（1000））；
}

在本例中，我们使用

*ngIf；否则

，像这样

val={{val.prop}}
加载。。
>

当我们构建项目时，会出现一个错误：

ERROR in src/app/example-component.html:6:12 - error TS2531: Object is possibly 'null'.

6   val = {{ val.prop  }}
             ~~~~~~~~~~

我没想到会这样，因为我们使用了

else

部分

详情：

• 我知道异步管道将把

  null

  添加到可观察类型中，这是可以的。从： 异步管道当前假定它订阅的可观察对象可以是异步的，这意味着可能还没有可用的值。在这种情况下，它仍然必须返回空值。换句话说，异步管道的返回类型包括null，这可能导致在已知可观察对象同步发出不可为null的值的情况下出现错误

• 因此，

  obs$| async as val

  可以是

  对象

  或

  null

  • 当它为

    null

    时，将呈现

    加载

    模板
  • 否则将呈现

    div

    ：因此在

    div

    内部，

    val

    将始终引用对象，对吗？
    那么为什么我们会得到

    可能为空的
    错误？

要复制测试，请从和下载并提取代码：

• npm安装

• npm运行构建

---

解决方法是使用以下if表达式：

（obs$| async）！作为val；否则加载

您需要在组件中实现

OnInit

，然后

strictNullInputTypes

不会失败，因为Angular知道变量

obs$

永远不能为null，因为您在

OnInit

中初始化

已修改类的图像：

---

如果有任何疑问，请询问我。

您需要在组件中实现

OnInit

，然后

strictNullInputTypes

不会失败，因为Angular知道变量

obs$

永远不能为空，因为您在

OnInit

中初始化

已修改类的图像：

---

如果有任何疑问，请询问我。

更新06.03.2020

在角度

9.0.5

原创

在中，此问题已经有一个未解决的问题。它正在发生

由于

ngIf

的语义，已知 上下文变量不可为null，但模板类型检查器 不会认为它们是这样的，仍然在报告错误时

stricnulltypes

已启用

正如您在OP中提到的，使用As any或$any函数禁用模板中的类型检查

$any（）可在绑定表达式中用于禁用 这个表达。这与TypeScript中的任何脚本都非常相似

val={{$any（val.prop}}

更新06.03.2020

在角度

9.0.5

原创

在中，此问题已经有一个未解决的问题。它正在发生

由于

ngIf

的语义，已知 上下文变量不可为null，但模板类型检查器 不会认为它们是这样的，仍然在报告错误时

stricnulltypes

已启用

正如您在OP中提到的，使用As any或$any函数禁用模板中的类型检查

$any（）可在绑定表达式中用于禁用 这个表达。这与TypeScript中的任何脚本都非常相似

val={{$any（val.prop}}

请看我的答案，如果有帮助，请投赞成票。（请看我的答案，如果它对你有帮助，请投赞成票我用你的代码来证明，不要让我失望，我不想让你浪费时间。哦，对不起，我错过了一些东西。你的答案会奏效——但不是因为你认为的原因。它之所以有效，是因为您使用的是

any

的可观察值，因此您将丢失所有类型检查。事实上，

obs$

的类型应该是

可观察的

。然后你会再次看到同样的错误。嗯，你是对的。和thx的任何解释。幸运的是，我找到了一个好答案。我用你的代码证明了这一点，不要让我失望，我不想让你浪费时间。哦，对不起，我错过了一些东西。你的答案会奏效——但不是因为你认为的原因。它之所以有效，是因为您使用的是

any

的可观察值，因此您将丢失所有类型检查。事实上，

obs$

的类型应该是

可观察的

。然后你会再次看到同样的错误。嗯，你是对的。和thx的任何解释。幸运的是，我找到了一个好答案。很高兴这是有帮助的$任何是角度模板函数，你可以在这里找到更多信息：很高兴这是有用的$任何是角度模板函数，您可以在此处找到更多信息：

<div *ngIf="obs$ | async;let val; else loading">
  val = {{ $any(val).prop  }}
</div>