为什么在检查未定义和\或空对象 {} 的可观察对象时 *ngIf 评估为真？答案

【问题标题】：Why does the *ngIf evaluate to true when checked against an observable that is undefined and\or empty object {}?为什么在检查未定义和\或空对象 {} 的可观察对象时 *ngIf 评估为真？
【发布时间】：2019-02-18 08:35:36
【问题描述】：

当 error$ 对象未定义或表示为 {} 的空对象时，为什么这不会评估为 false？它的计算结果为 true 并显示“出了点问题”消息。

`<div *ngIf="(error$ | async) != null">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>`

因此要求我在错误对象上有一个布尔属性

`<div *ngIf="(error$ | async)?.error">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>`

我知道该对象是空的{}，因为我在组件中订阅了它并在控制台记录它。我尝试了以下方法，都不起作用

`<div *ngIf="(error$ | async) !== (of({}) | async)">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>`

`<div *ngIf="(error$ | async) != (of({}) | async)">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>`

`<div *ngIf="(error$ | async) != '{}'">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>`

`<div *ngIf="(error$ | async) != undefined">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>`

`<div *ngIf="(error$ | async) != {}">
  <span>Something went wrong {{(error$ | async)?.errorResponse}}</span>
</div>
`

提前致谢

【问题讨论】：

“不起作用”是什么意思？如果 error$ 未定义，则不会显示第一个“出现问题”，因为 error$ | async 也将评估为 null/undefined（不确定是哪个，但没关系，因为您使用的是非严格比较）。无论如何，这看起来很正常。
当 error$ observable 为 {} 时，会显示消息出错了。但如果 error$ 为空，*ngIf 不会显示它。但无论如何，这让我感到困惑
嗯，{} 与 null 不同。
那么第二种和第三种情况是否应该覆盖一个空对象？
不确定您的意思，但您不需要其他属性，如果您愿意，可以测试(error$ | async)?.errorResponse。解决您的问题的一种更简洁的方法是在没有错误时将error$ 设置为EMPTY。然后您可以简单地使用*ngIf="error$ | async" 进行测试。（不确定这在您的情况下是否可行，因此我还没有将其作为答案发布。）

标签： angular observable

【解决方案1】：

问题是由于在我的状态管理存储中使用了扩展运算符引起的。我已经像error: null 一样将存储错误对象作为null 开始。然后在我的 fetchPosts 操作中，我使用了像 error: {...state.posts.error} 这样的扩展运算符，这反过来又创建了一个新的空对象 {}。因此，使用*ngIf="error$ | async" 总是评估为真，并且由于某种原因检查空对象的不等式，如*ngIf="(error$ | async) != '{}'" 或*ngIf="(error$ | async) != (of({}) | async)" 似乎评估为真或根本不起作用。我使用 error: null 而不是扩展运算符，现在 error$ | async 按预期工作。

【讨论】：