在 *ngIf 中使用“OR”

Question

我有一个来自 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>

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

的值

Answer 2

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

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

Answer 3

您可以像下面那样简单地做

*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

Answer 4

使用以下代码作为 OR 条件

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

Answer 5

我了解到当状态为“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 的好机会。

See: 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>

Answer 6

使用*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>

在 *ngIf 中使用“OR”

use “OR” in *ngIf

angular-ng-if

angular