使用 Observable 闪烁 *ngIf 的内容

Question

我开发了一个 Angular 应用程序。我想在我的应用程序未投入生产时显示一些文本，否则什么都不显示。我有以下代码，其中环境是可观察的：

<span *ngIf="(environment | async) !== 'production'">bla bla text...

问题是只要observable没有解析就显示内容

我认为这解决了：

undefined !== 'somestring'

因此条件得到验证并显示文本。这不是我想要的，我不希望显示，也不希望在解析 observable 之前对表达式求值。

我应该使用什么语法来防止不需要的内容闪现？

感谢您的帮助

Answer 1

您可以使用 Array.indexOf:

测试 undefined、null 和 'production'

<span *ngIf="[undefined, null, 'production'].indexOf(environment | async) < 0">

Answer 2

在您的组件中一劳永逸地订阅，并在您的模板中测试实际发出的值：

<span *ngIf="env && env !== 'production'">

或者在您的模板中订阅一次，并将结果存储在一个变量中：

<ng-container *ngIf="environment | async as env">
  <span *ngIf="env !== 'production'">

flashing content of *ngIf using an Observable