У меня есть ответ от 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 } ] 

я хочу показать эти данные при наведении на основе имени, например, если я нахожусь в отпуске, я должен получить объект данных отпуска и если я наведите курсор на Maternity, я должен получить объект данных материнства / любую идею о том, как это сделать

Попробуй это

 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

  {amp}lt;ion-select [(ngModel)]="leavetype" name="leavetype" (ionChange)="changeLeave()"{amp}gt; {amp}lt;ion-select-option *ngFor="let val of result.leave_types" [value]="val"{amp}gt; {{val.name}} {amp}lt;/ion-select-option{amp}gt; {amp}lt;/ion-select{amp}gt; 
 {amp}lt;li *ngFor=" let leaveTypeAndBalance of leaveTypesAndBalanceList" class="balance-status"{amp}gt; {{leaveTypeAndBalance.balance | default: '' }} {{leaveTypeAndBalance.display_name}} {amp}lt;div *ngIf="leaveTypeAndBalance.name == leaveTypesName.lwp" class="relative display-inline"{amp}gt; {amp}lt;span class="icon-info-default info-icon"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;div class="lwp-hover"{amp}gt;This is your current month LWP balance{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div *ngIf="leaveTypeAndBalance.name == leaveTypesName.leave" class="relative display-inline"{amp}gt; {amp}lt;div class="on-hover" *ngFor="let carryForwardData of carryForwardLeave" [ngClass]="{'none' : carryForwardData.name !== leaveTypesName.leave}"{amp}gt; {amp}lt;div *ngIf="carryForwardData.name == leaveTypesName.leave"{amp}gt; Carried forward from {{carryForwardData.carry_forward_date}} {amp}lt;span{amp}gt;{{carryForwardData.carry_forward_count}}{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div *ngIf="leaveTypeAndBalance.name == leaveTypesName.Maternity" [ngClass]="{'none' : carryForwardData.name !== leaveTypesName.leave}" class="relative display-inline"{amp}gt; {amp}lt;div class="on-hover" *ngFor="let carryForwardData of carryForwardLeave"{amp}gt; {amp}lt;div *ngIf="carryForwardData.name == leaveTypesName.Maternity"{amp}gt; Carried forward from {{carryForwardData.carry_forward_date}} {amp}lt;span{amp}gt;{{carryForwardData.carry_forward_count}}{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

просто нужно было сделать enum и сравнить имя с ними и класс

В файле 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 при «наведении курсора» получить данные в виде объекта.

Подобно.

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

Живой пример