组件HTML中带有*的Angular * ngIf条件

Question

我正在尝试获取带有OR的* ngIf，但是第二个选项被忽略了。

代码如下：

<div *ngIf="router.url != '/one' || router.url != '/two'">
  show something
</div>

如何使它正常工作？

Answer 1

使用router.url != '/one' || router.url != '/two'意味着：

If router.url != '/one' returns true

If router.url != '/two' returns true

如果因为使用OR而满足第一个条件，则永远不会评估第二个条件

Answer 2

正确的做法是忽略第二个条件，因为当router.url != '/one'已经满足条件并且从未评估第二个条件时，请尝试这种方式

<div *ngIf="!(router.url == '/one' || router.url == '/two')">
  show something
</div>

Answer 3

检查您的值以确保问题与您的数据无关，然后将!=替换为!==。

但是，对于您而言，我认为您应该使用和&&，因为使用||时，由于您的路线是/one或{{1 }}条件为真。

尝试一下：

/two

与以下相同：

<div *ngIf="router.url !== '/one' && router.url !== '/two'">
  show something
</div>

Answer 4

运行以下代码，也许会解释一些问题：

<p>Current URL: {{ router.url }}</p>
<p>Statement: router.url != '/one' - <strong>{{ router.url != '/one' }}</strong></p>
<p>Statement: router.url != '/two' - <strong>{{ router.url != '/two' }}</strong></p>
<p>Statement: router.url != '/one' || router.url != '/two' - <strong>{{ router.url != '/one' || router.url != '/two' }}</strong></p>
<div *ngIf="router.url != '/one' || router.url != '/two'">
  show something
</div>

Answer 5

您的条件始终为true，因为它检查一个值是否与另一个不同。因此，只有在router.url同时等于'/one'和'/two'的情况下，条件才为假，这在逻辑上是不可能的。