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": "Maternity\n",
                "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": "Maternity\n",
                "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": "Maternity\n",
                "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>

Live Example

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

3 个答案: