代码之家 › 专栏 › 技术社区 › Niladri Banerjee - Uttarpara

角度5:根据输出显示状态文本

angular5 angular

-1

Niladri Banerjee - Uttarpara · 技术社区 · 7 年前

在Angular5中,我想根据从PHP后端(数组)接收到的输出显示不同的文本。比如说,每个记录都有一个状态字段。状态可以是“已提交”、“已取消”、“请求成本”等。我想在视图(角度5)文件中显示状态,就像状态是“请求成本”一样,它将打印为“请求成本”。如果状态为“取消”,则将打印为“取消”等。是否应使用“NgIf,Else,Then”? 目前我写的代码如下:

<td class="font-size-md">{{item.status}}</td>

3 回复 | 直到 7 年前

1

2

Immad Hamid 7 年前

使用当前方法,您可以执行以下任一操作:

<td class="font-size-md">{{ getText(item.status) }}</td>

在您的.ts文件中

getText(status) {
   if (status === "submitted") return "Submitted"
   if (status === "cancelled") return "Cancelled"
   if (status === "requestforcost") return "Request For Cost"
}

<td
   *ngIf="item.status === 'submitted'"
   class="font-size-md">
   submitted
</td>

<td
   *ngIf="item.status === 'cancelled'"
   class="font-size-md">
   Cancelled
</td>

<td
   *ngIf="item.status === 'requestforcost'"
   class="font-size-md">
   Request For Cost
</td>

或者你也可以这样做:

<td class="font-size-md">
   <span *ngIf="item.status === 'submitted'">Submitted</span>
   <span *ngIf="item.status === 'cancelled'">Cancelled</span>
   <span *ngIf="item.status === 'requestforcost'">Request For Cost</span>
</td>

2

7

Ashish Ranjan 7 年前

你可以有多个条件; tds 比如:

<td class="font-size-md" *ngIf="item?.status == 'requestforcost'">Request For Cost</td>
<td class="font-size-md" *ngIf="item?.status == 'cancelled'">Cancelled</td>

.. 等

或者在 ts

let statusMap = {requestforcost: "Request For Cost", cancelled: "Cancelled"}

在你的 HTML 拥有 td

<td class="font-size-md" *ngIf="item?.status>{{statusMap[item.status]}}</td>

3

1

Krishna 7 年前

你可以这样写。

<td class="font-size-md" *ngIf="item.status === 'submitted">Show here submitted text</td>
<td class="font-size-md" *ngIf="item.status === 'cancelled">Show here submitted text</td>