Question

在Angular 5中，我想根据从PHP后端（数组）收到的输出显示不同的文本。说，对于每个记录，都有一个状态字段。状态可以是“已提交”，“已取消”，“要求费用”等。我想将状态显示在视图文件中（在Angular 5中），就像状态为“ requestforcost”一样，它将打印为“ Request For成本。如果状态为“已取消”，它将打印为“已取消”等。我是否应该使用“ NgIf，Else，Then”？目前，我已编写如下代码：

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

Answer 1

您可以有多个条件； 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>

Answer 2

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

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

Answer 3

您可以像下面这样写。

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

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

3 个答案: