时间戳

首页 > 解决方案 > 获取 ngFor 根据名称重复数据

javascript - 获取 ngFor 根据名称重复数据

问题描述

我有一个来自 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
            }
        ]

我想根据名称在悬停时显示这些数据，比如如果我悬停在休假上，我应该得到休假的数据对象，如果我悬停在产假上，我应该得到产假的数据对象/关于如何做的任何想法

标签： javascriptangulartypescript

解决方案

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

现场示例

推荐阅读