如何在角度 6 中的 *ngIf 语句中给出多个条件？答案

【问题标题】：How to give multiple conditions in *ngIf statement in angular 6?如何在角度 6 中的 *ngIf 语句中给出多个条件？
【发布时间】：2019-01-27 04:54:35
【问题描述】：

我的导航栏，

<div *ngIf = ("path == '/login'" && "path == '/home'") class="tabs-header-nav">
<a routerLink="/login" class="nav-link active">login</a>
<a routerLink="/bb" class="nav-link">home</a>
<a routerLink="/" class="nav-link">CC</a>
</div>

 <div *ngIf = ("path == '/aa'" || "path == '/bb'") class="tabs-header-nav">
<a routerLink="/aa" class="nav-link active">aa</a>
<a routerLink="/bb" class="nav-link">bb</a>
<a routerLink="/" class="nav-link">CC</a>
</div>

同样，我的 html 中有 5 到 6 个导航栏。现在我需要为特定页面显示一个特定的导航栏。单个 if 条件（ *ngIf = "path === '/aa'" ）似乎正在工作，如果我给出多个条件它不起作用。你能帮我解决这个问题吗？

【问题讨论】：

结帐NgSwitch
你能举个例子说明什么是行不通的吗？

标签： html angular typescript angular6

【解决方案1】：

你应该选择带有多个值的ngSwitch

<div [ngSwitch]="path">
  <div *ngSwitchCase="'/login'">...</div>
  <div *ngSwitchCase="'/home'">...</div>
</div>

【讨论】：

【解决方案2】：

我在这里创建了一个Stackblitz 演示

我认为你在 *ngIf 引用中做错了

【讨论】：

您在 stackblitz 上创建的内容是正确的。但是在此处添加您在 stackblitz 中添加的内容。
添加了完整的代码并解释了每一步都非常耗时，这就是我直接添加演示的原因......演示总是更好。你明白我做了什么..？
好的兄弟。但是有人看到你的回答。你知道他说什么吗？。按照他会说的方式并投反对票。虽然可能链接也有答案，请在此处添加一些代码。
但我会感谢您宝贵的时间来回答，然后我只为您投票。

【解决方案3】：

如果您有可能每次都不同的数据，您大多使用If。但如果不是在每个地方都可以。最好在代码中使用switch-case，例如：

public string TestSwitchCase(string value)
    {
        switch (value)
        {
            case "John":
                return null;
            case "Jack":
                return "Jack";
            default:
                break;
        }

        return null;
    }

现在在 Angular 中，最好的方法是在 HTML 代码中执行此操作。这是ngSwitch，使用如下：

<container-element [ngSwitch]="switch_expression">
 <some-element *ngSwitchCase="match_expression_1">...</some-element>
 <some-element *ngSwitchCase="match_expression_2">...</some-element>
 <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
 <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
       <inner-element></inner-element>
       <inner-other-element></inner-other-element>
       </ng-container>
       <some-element *ngSwitchDefault>...</some-element>
</container-element>

欲了解更多信息，请参阅：This

祝你好运。

【讨论】：

【解决方案4】：

[解决方案] : 只需使用“&&”运算符在 *ngIf 中添加多个条件 -

//TypeScript File - demo.ts

   //Declaration
   flag: any;
   temp_array = [];

   //Assignment
   this.flag = true;
   this.temp_array = [1,2];

<!--HTML File - demo.html-->
  
  <div *ngIf="flag && temp_array.length>0">
    Both *ngIf conditions passes
  </div>

【讨论】：