Angular 使用“；或”；in*ngIf

我有一个来自API的响应，我想设置一个if条件来检查响应是3还是6，以将ng模板设置为success，否则获得的任何其他数据都应该设置为danger

如何检查data.delivery\u状态是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>

发送
发送

由于选项是互斥的，只需添加两次

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\u status

---

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

您只需执行以下操作即可

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

发送-成功
发送-危险

---

工作

使用以下代码或条件

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

我知道当状态为“3”或“6”时，您希望

成功

，但所有其他情况都是

危险

。这是我的代码：

<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的好机会

见：

以下是我的编码建议：

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

成功
成功
发送-危险

使用

*ngIf=“data.delivery|u status=='3'| | data.delivery|u status=='6'

而不是

或'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>

发送
发送

对于

和
使用
&&
，
对于
或
使用
|
这会使3成功，6危险，这不是作者想要的。作者想要使3和6成功，否则危险。