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

如果您的方法onValueChanged的data是某個國家/地區，那么您可以過濾您的period onValueChanged組：

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);

Answer 2

你可以做：

onValueChanged(event) {
   const country = event.target.value;
   this.admissionService.getAdmissions().pipe(
    // get the object in concern (let's say the Germany slice)
     map(countriesData => countriesData.find(countryData => countryData.name === 
          country)),
    // get the data array from the object in concern
    map(countryData => countryData.data),
   ).subscribe(dataArrayForCountry => {
     // do whatever you need, at this point I am just logging it.
     console.log(dataForCountry);
  });
}

如果您使用的是舊版本的 RxJs，它應該是：

this.admissionService.getAdmissions()
    .map(countriesData => countriesData.find(countryData => countryData.name === country))
    .map(countryData => countryData.data)
    .subscribe(dataArrayForCountry => {
      console.log(dataArrayForCountry);
  });