Angular 使用可见光闪烁*ngIf的内容

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

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

从而验证条件并显示文本。这不是我想要的，我不想显示，不想在可观测的分辨率之前对表达式求值

我应该使用什么语法来防止意外内容的闪现

感谢您的帮助

您可以使用Array.indexOf测试未定义的、空的和“production”：

您可以使用Array.indexOf测试未定义、null和“production”：

---

在组件中一次性订阅，并在模板中测试实际发出的值：

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

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

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

---

在组件中一次性订阅，并在模板中测试实际发出的值：

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

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

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

---

---

不幸的是，我不知道可能的环境列表。没有白名单，只有黑名单OK。我修改了我的答案。这看起来不错，但我仍然有闪光灯。在解析之前，环境是未定义的，还是可观察的对象？请尝试将null添加到列表中。在我的示例中，我还将“prod”更改为“production”。在这种情况下，null有效。谢谢现在我需要让它使用：[ngClass]={'nonproduction'：[null，'devel'].indexOfenvironment | async<0}>不幸的是，我不知道可能的环境列表。没有白名单，只有黑名单OK。我修改了我的答案。这看起来不错，但我仍然有闪光灯。在解析之前，环境是未定义的，还是可观察的对象？请尝试将null添加到列表中。在我的示例中，我还将“prod”更改为“production”。在这种情况下，null有效。谢谢现在我需要让它使用：[ngClass]={'nonproduction'：[null，'devel'].indexOfenvironment | async<0}>作为参考：好奇，这能做到吗？bla bla text…@Adam我会喜欢它的，但是：未捕获错误：模板解析错误：解析错误：意外标记！==在[environment | async？！=='production']的第24列中，供参考：好奇，这能做到吗？bla bla text…@Adam我会喜欢它的，但是：未捕获错误：模板解析错误：解析错误：意外标记！==在[environment | async？！=='production']的第24列，感谢您的回答。不在模板中使用observable确实是一个解决方案，但需要一种在模板中使用它们的方法。您的第二个建议在imo中有点冗长，不便于概括。建议使用async：您订阅一次，并且只订阅一次，然后将结果分配给一个变量，您可以根据需要多次使用该变量，而无需反复重新订阅。请记住，每次在模板中使用async时，您都订阅了可观察的。如果天气寒冷，你会再次触发管道。如果它是一个HTTP可观察对象，那么每次都会发送一个新的HTTP请求。所以直接在模板中使用可观察对象不好吗？异步管道有点误导了AngularJS中已经存在的错误模式。这是绝对正确的，但您必须了解它是如何工作的，它意味着什么，以及如何最好地编写代码以避免糟糕的情况。当然，这对所有情况都是正确的。到目前为止，我认为异步管道是完全无害的，最好缩小组件大小并将内容推送到模板中。我现在更清楚了谢谢你的回答。不在模板中使用observable确实是一个解决方案，但需要一种在模板中使用它们的方法。您的第二个建议在imo中有点冗长，不便于概括。建议使用async：您订阅一次，并且只订阅一次，然后将结果分配给一个变量，您可以根据需要多次使用该变量，而无需反复重新订阅。请记住，每次在模板中使用async时，您都订阅了可观察的。如果天气寒冷，你会再次触发管道。如果它是一个HTTP可观察对象，那么每次都会发送一个新的HTTP请求。所以直接在模板中使用可观察对象不好吗？异步管道有点误导了AngularJS中已经存在的错误模式。这是绝对正确的，但您必须了解它是如何工作的，它意味着什么，以及如何最好地编写代码以避免糟糕的情况。当然，这对所有情况都是正确的。到目前为止，我认为异步管道是完全无害的，最好缩小组件大小并将内容推送到模板中。我现在更清楚了