角度-如何根据条件显示细节

Question

我想使用Angular-13从ASP.NET Core Web API显示员工的详细信息。

我有以下观点：

{
"id": 1,
"employee_name": "Frank Lammmy",
"charge_mode": 1,
"charge_value": 12344.55,
"charge_percent": 
}

想要在员工详细信息上实现的是：如果charge_mode=1，它应该显示charge_value，但如果charge_mode=2，它应该会显示charge_percent。

我试过这个：

<div class="col-md-6">
Employee Name: <strong>{{ employeeList.employee_name || 'N/A' }}</strong>
</div>
<div class="col-md-6">
*ngIf="employeeList.charge_mode === 1" Amount: <strong>{{ employeeList?.charge_value || 'N/A' }}</strong>
*ngIf="employeList.charge_mode === 2" Percentage (%): <strong>{{ employeeList?.charge_percent || 'N/A' }}</strong>
</div>

但它不起作用，它只是显示原始数据。

我该如何做到这一点？

Answer 1

您提供的代码很接近，但您希望将*ngIf指令应用于一些HTML元素。

<div class="col-md-6">
Employee Name: <strong>{{ employeeList.employee_name || 'N/A' }}</strong>
</div>
<div class="col-md-6">
<span *ngIf="employeeList.charge_mode === 1">Amount: <strong>{{ employeeList?.charge_value || 'N/A' }}</strong></span>
<span *ngIf="employeeList.charge_mode === 2">Percentage (%): <strong>{{ employeeList?.charge_percent || 'N/A' }}</strong></span>
</div>