javascript - Angular 如何使用单击功能根据国家/地区名称提取和显示特定的 JSON 数据

Question

我有如下的 JSON 格式数据。

 const period: Data[] = [
 {
   name: "Germany",
   id: 1,
   data: [
     { date0: "2015-01-28", date1: "2015-02-04" },
     { date0: "2015-08-27", date1: "2015-09-07" },
     { date0: "2015-12-24", date1: "2016-01-05" }
},
{
   name: "France",
   id: 2,
   data: [
     { date0: "2015-01-28", date1: "2015-02-04" },
     { date0: "2015-08-27", date1: "2015-09-07" },
     { date0: "2015-12-24", date1: "2016-01-05" }

我可以在我的方法中调用服务来获取所有这些数据。

   {
    this.admissionService.getAdmissions().subscribe(perioddata =>
      {
    this.admission = [perioddata]

   )};

但是我只想要通过实现 onValueChanged($event) 来调用基于国家名称的数据

 onValueChanged(data) {
    this.admission.filter(['country', '=', data.value]);
}

<dx-select-box
            id="selectbox"
            displayExpr="name"
            (onValueChanged)="onValueChanged($event)"
        ></dx-select-box>

基本上我的前端是，我从列表中选择一个国家，它应该根据国家名称调用数据。

Answer 1

如果您的 data方法 onValueChanged是某个国家，那么你可以过滤你的数组 period :

onValueChanged(data) {
    this.period.filter(f => f.name == data);
}

一个例子:

const period = [
    {
        name: "Germany",
        id: 1,
        data: [
            { date0: "2015-01-28", date1: "2015-02-04" },
            { date0: "2015-08-27", date1: "2015-09-07" },
            { date0: "2015-12-24", date1: "2016-01-05" }
        ]
    },
    {
        name: "France",
        id: 2,
        data: [
            { date0: "2015-01-28", date1: "2015-02-04" },
            { date0: "2015-08-27", date1: "2015-09-07" },
            { date0: "2015-12-24", date1: "2016-01-05" }
        ]
    }
];

event = 'France';
const result = period.filter(f => f.name == event);
console.log(result);