*ngif 模板中的 typescript null 错误答案

【问题标题】：typescript null errors inside of *ngif template*ngif 模板中的 typescript null 错误
【发布时间】：2019-12-05 16:56:34
【问题描述】：

我正在定义一个我认为非常简单的函数，如果该值存在，它会提取从服务器返回的值。它无法编译，出现打字稿错误，说“值可能为空”。

由于这是在 *ngif 内部，我觉得应该足以说它不为空。但为了安全起见，我向对象添加了非空指令 (!)。但我仍然得到错误。我什至将它添加到对象的属性中，以防万一。仍然出现错误。

<div *ngIf="info">
  <p>Info Id: {{info!.id!}}</p>
  <p>Info databaseText: {{info!.databaseText!}}</p>
  <p>Info localText: {{info!.localText!}}</p>
  <p>Info computedText: {{info!.computedText!}}</p>
</div>

不确定接下来要尝试什么。任何想法，将不胜感激。我不想禁用 typescript null 检查。

【问题讨论】：

使用？相反，但问题的核心是你没有在你的组件中正确输入它...... IMO，打字稿中严格的空检查确实有问题/导致的问题比他们解决的问题更多
您确定错误是由模板的那个部分引起的吗？您是否尝试在末尾不使用!（例如{{info!.localText}}）？这就是Angular documentation中给出的用法。
@bryan60 很有趣 - 声明一个可能为 null 或可能是来自服务器的任意对象的变量的正确方法是什么？
我需要看看你是怎么做的，但你需要为它写一个界面并输入它。但是，如果没有严格的 null 检查，它会容易得多。
@bryan60 这解决了问题。该变量在另一个文件中被错误地声明。将类型更改为any 解决了它。你想提交它作为答案，我可以接受吗？

标签： angular typescript

【解决方案1】：

实际上<div *ngIf="info"> 应该足够了：在其中你可以简单地使用{{info.id}} 等，而无需进一步的空值检查，所以真正的 问题是编译器无法识别@987654323 @。

可能的原因是你在 app.module.ts 中的@NgModule 的declarations 中缺少这个组件。

【讨论】：

【解决方案2】：

正如@bryan60 所建议的，这个问题原来是一个不正确的声明。我将 info 变量更改为 info: any;，现在它可以在没有任何内容的情况下工作！要么？必需的。谢谢！

【讨论】：

这并不能解决问题，因为您通常将 TypeScript 用于类型。

【解决方案3】：

你的代码：

  <p>Info Id: {{info!.id!}}</p>
  <p>Info databaseText: {{info!.databaseText!}}</p>
  <p>Info localText: {{info!.localText!}}</p>
  <p>Info computedText: {{info!.computedText!}}</p>
</div>

那么这是什么意思？ <p>Info Id: {{info!.id!}}</p>

! 称为非空断言运算符。简单来说，我们是在告诉 typescript 无论发生什么，! 之前的值不能为空或已定义。在上面的示例中，可能定义了 info，但 info.computedText 或 info 的任何其他属性未定义或为 null。

仅在 typescript 始终可以 100% 确定您正在检查的值不能为 null 或未定义的情况下使用非 Null 断言运算符。

如果您在 Google 上搜索非空断言运算符，您会发现更多关于此主题的信息。 :)

【讨论】：

【解决方案4】：

使用可选参数，如

  <div *ngIf="info">
    <p>Info Id: {{info?.id!}}</p>
    <p>Info localText: {{info.?localText!}}</p>
  </div>

如果这就是你要找的东西

【讨论】：

【解决方案5】：

应该是问号。因此

<div *ngIf="info">
  <p>Info Id: {{info?.id}}</p>
  etc.

【讨论】：

【解决方案6】：

为什么您在属性前面有 !，尝试不使用它，它应该可以工作，

<div *ngIf="info">
  <p>Info Id: {{info.id}}</p>
  <p>Info databaseText: {{info.databaseText!}}</p>
  <p>Info localText: {{info.localText!}}</p>
  <p>Info computedText: {{info.computedText!}}</p>
</div>

【讨论】：

请详细说明原因。