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

Question

我的导航栏，

<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'”）似乎正在工作，如果我给出多个条件它不起作用。你能帮帮我吗？

Answer 1

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

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

Answer 2

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

我认为你在* ngIf报价中犯了错误

Answer 3

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

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

        return null;
    }

现在有角度，有最好的方法在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

祝好运。

Answer 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>