获取 ngFor 以根据名称重复数据

Question

我有一个来自API的响应：

"leave_types": [
{
"id": 1,
"name": "normal_leave",
"display_name": "Leave",
"carry_forward_date": "31st Dec 2018",
"carry_forward_count": 0
},
{
"id": 4,
"name": "maternity_leave",
"display_name": "Maternityn",
"carry_forward_date": "31st Dec 2018",
"carry_forward_count": 0
}
]

我想根据名称在悬停时显示此数据，例如如果我悬停在休假时，我应该获取休假的数据对象，如果我将鼠标悬停在产科上，我应该获取产假的数据对象/关于如何做的任何想法

Answer 1

试试这个

result={"leave_types": [
{
"id": 1,
"name": "normal_leave",
"display_name": "Leave",
"carry_forward_date": "31st Dec 2018",
"carry_forward_count": 0
},
{
"id": 4,
"name": "maternity_leave",
"display_name": "Maternityn",
"carry_forward_date": "31st Dec 2018",
"carry_forward_count": 0
}
]}

.html

<ion-select [(ngModel)]="leavetype" name="leavetype" (ionChange)="changeLeave()">
<ion-select-option *ngFor="let val of result.leave_types" [value]="val"> {{val.name}}  </ion-select-option>
</ion-select>

Answer 2

<li *ngFor=" let leaveTypeAndBalance of leaveTypesAndBalanceList" class="balance-status">
{{leaveTypeAndBalance.balance | default: '' }} {{leaveTypeAndBalance.display_name}}
<div *ngIf="leaveTypeAndBalance.name == leaveTypesName.lwp" class="relative display-inline">
<span class="icon-info-default info-icon"></span>
<div class="lwp-hover">This is your current month LWP balance</div>
</div>
<div *ngIf="leaveTypeAndBalance.name == leaveTypesName.leave"
class="relative display-inline">
<div class="on-hover" *ngFor="let carryForwardData of carryForwardLeave"
[ngClass]="{'none' : carryForwardData.name !== leaveTypesName.leave}">
<div *ngIf="carryForwardData.name == leaveTypesName.leave">
Carried forward from {{carryForwardData.carry_forward_date}}
<span>{{carryForwardData.carry_forward_count}}</span>
</div>
</div>
</div>
<div *ngIf="leaveTypeAndBalance.name == leaveTypesName.Maternity"
[ngClass]="{'none' : carryForwardData.name !== leaveTypesName.leave}"
class="relative display-inline">
<div class="on-hover" *ngFor="let carryForwardData of carryForwardLeave">
<div *ngIf="carryForwardData.name == leaveTypesName.Maternity">
Carried forward from {{carryForwardData.carry_forward_date}}
<span>{{carryForwardData.carry_forward_count}}</span>
</div>
</div>

只需要制作枚举并将名称与它们和类进行比较

Answer 3

在 name.components.ts 文件中，在结果变量中添加响应

response = { "leave_types": [
{
"id": 1,
"name": "normal_leave",
"display_name": "Leave",
"carry_forward_date": "31st Dec 2018",
"carry_forward_count": 0
},
{
"id": 4,
"name": "maternity_leave",
"display_name": "Maternityn",
"carry_forward_date": "31st Dec 2018",
"carry_forward_count": 0
}
]
}
}

在 name.component.html 文件中，在"鼠标悬停"上获取受关注的数据作为对象。

喜欢。

<ul *ngFor="let res of response.leave_types">
<li (mouseover)="typeValue=res">{{res.display_name}}</li>
</ul>
<ul *ngIf="typeValue">
<li>{{typeValue.name}}</li>
<li>{{typeValue.display_name}}</li>
<li>{{typeValue.carry_forward_date}}</li>
<li>{{typeValue.carry_forward_count}}</li>
</ul>

现场示例