如何在 Angular 语法中应用多个 ngIf 条件？答案

【问题标题】：How to apply multiple ngIf conditions in Angular syntax?如何在 Angular 语法中应用多个 ngIf 条件？
【发布时间】：2021-08-09 15:47:52
【问题描述】：

我需要在 ngIf 语句中设置多个条件。

我已经为多个用户创建了模板，但有些内容我不想为特定用户看到，例如超级管理员、管理员、部门用户、部门用户和单位领导。

enum of users: ['s','a','d','u','c']

1> Super Admin -> s
2> Admin -> a
3> Division Supervisor -> d
4> Unit Leader -> u
5> Section Chief -> c

例如，我想在下面显示特定用户登录的按钮，我尝试下面的代码对两个用户都可以正常工作，但是

<button *ngIf="menuUserType === 'a' || menuUserType !== 's' " class="btn-style red-btn" routerLink="/division/add-edit-division/0"><span class="material-icons">add</span>Add Division</button>

但是当我尝试申请更多用户时它不起作用并且我得到错误。

<button *ngIf="menuUserType === 'a' || menuUserType === 'c' || menuUserType !== 's' || menuUserType !== 'd'  " class="btn-style red-btn" routerLink="/division/add-edit-division/0"><span class="material-icons">add</span>Add Division</button>

错误

那么有什么解决办法吗？

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

您的第二个 if 是错误的，因为字母 A 和 C 与字母 S 不同。您正在做的另一件事是，如果变量与 S 不同且同时是 D，那么 Angular 会向您显示错误，它总是正确的，因为您使用的任何字母都是正确的。你需要的只是这个：

&lt;button *ngIf="menuUserType !== 's' &amp;&amp; menuUserType !== 'd'" class="btn-style red-btn" routerLink="/division/add-edit-division/0"&gt;&lt;span class="material-icons"&gt;add&lt;/span&gt;Add Division&lt;/button&gt;

【讨论】：

【解决方案2】：

是的，这一定会发生。因为当你在写 menuUserType === 'a' || menuUserType === 'c' 然后指定 menuUserType !== 's' || menuUserType !== 'd' ，这意味着它将始终是 a 、 c 或 u 。（错误表明它总是正确的）

因此无需使用 === 和 !-- 指定多个条件。

您只能直接指定 !== 或 == 条件。

<button *ngIf="menuUserType !== 's' && menuUserType !== 'd'" class="btn-style red-btn" routerLink="/division/add-edit-division/0"><span class="material-icons">add</span>Add Division</button>

这将自动意味着它等于除了 s 和 d 之外的任何东西。

【讨论】：