在 *ngIf 中使用“OR” [重复]答案

【问题标题】：use “OR” in *ngIf [duplicate]在 *ngIf 中使用“OR” [重复]
【发布时间】：2018-09-21 11:52:37
【问题描述】：

我有一个来自 API 的响应，我想设置一个 if 条件来检查响应是 3 还是 6 以将 ng-template 设置为成功，否则任何其他获取的数据都应设置为危险，

如何检查 data.delivery_status 是 3 还是 6？

这是我下面的代码，它不起作用：

<li *ngIf="data.delivery_status==='3' OR '6';then success else danger"></li>
<ng-template #success>
    <td><span class="btn btn-success btn-sm">Sent</span></td>
</ng-template>
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>

【问题讨论】：

将&& 用于AND，|| 用于OR

标签： angular angular-ng-if

【解决方案1】：

由于选项是互斥的，只需将li 元素添加两次即可：

<li *ngIf="data.delivery_status==='3'">
    <ng-template #success>
        <td><span class="btn btn-success btn-sm">Sent</span></td>
    </ng-template>
</li>

<li *ngIf="data.delivery_status==='6'">
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>
</li>

Angular 将只渲染其中一个，具体取决于delivery_status 的值。

【讨论】：

这使得 3 成功而 6 危险，这不是作者想要的。作者想渲染 3 和 6 成功，否则危险。

【解决方案2】：

你可以像下面这样简单地做

*ngIf="(data.delivery_status === 3 || data.delivery_status === 6);then success else danger"

完整代码

<li *ngIf="(data.delivery_status === 3 || data.delivery_status === 6);then success else danger"></li>
<ng-template #success>
  <td><span class="btn btn-success btn-sm">Sent - success</span></td>
</ng-template>
<ng-template #danger>
  <td><span class="btn btn-danger btn-sm">Sent - danger</span></td>
</ng-template>

工作Stackblitz

【讨论】：

【解决方案3】：

使用*ngIf="data.delivery_status==='3' || data.delivery_status === '6' 代替OR '6'

<li *ngIf="data.delivery_status==='3' || data.delivery_status === '6';then success else danger"></li>
<ng-template #success>
    <td><span class="btn btn-success btn-sm">Sent</span></td>
</ng-template>
<ng-template #danger>
    <td><span class="btn btn-danger btn-sm">Sent</span></td>
</ng-template>

【讨论】：

【解决方案4】：

<li *ngIf="data.delivery_status==='3' || data.delivery_status==='6';then success else danger"></li>

但更好的是将该条件提取到组件中。

【讨论】：

【解决方案5】：

使用以下代码作为 OR 条件

<li *ngIf="data.delivery_status ==='3' || data.delivery_status === '6';then success else danger"></li>

【讨论】：

【解决方案6】：

我知道当状态为“3”或“6”时您想要success，但所有其他情况都是danger。所以这是我的代码：

<li *ngIf="data.delivery_status==='3' || data.delivery_status==='6'">
    <td><span class="btn btn-success btn-sm">Sentt - success</span></td>
</li>
<li *ngIf="!(data.delivery_status==='3' || data.delivery_status==='6')">
    <td><span class="btn btn-danger btn-sm">Sent - danger</span></td>
</li>

这也是使用 NgSwitch 的好机会。

见：https://angular.io/api/common/NgSwitch

这是我的编码建议：

 <li [ngSwitch]="data.delivery_status">
     <td *ngSwitchCase="'3'"><span class="btn btn-success btn-sm">Sentt - success</span></td>
     <td *ngSwitchCase="'6'"><span class="btn btn-success btn-sm">Sentt - success</span></td>
     <td *ngSwitchDefault><span class="btn btn-danger btn-sm">Sent - danger</span></td>
 </li>

【讨论】：