角2阵列：分类成基于用户输入

数据集我通过此数据源 http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml 角2阵列：分类成基于用户输入

我已转换的XML响应于JSON成功但很努力进行分类的响应为日期集试图循环。

所以基本上我试图通过数组循环，如果用户输入数组中存在的日期，那么只使用相应的数据集（索引）。

例如。如果用户选择该日期 “20170811”，那么我只想对数据集（货币，利率） “20170811”

这里是我的代码 // TS

this.forexDataService.getData().then((data) => { 
this.data = data; 
for(var i = 0; i < this.data.length; i++){ 
    this.time = this.data[i].time; 
    console.log(this.time); 
} 
});

// HTML

<ion-list> 
    <ion-item> 
     <ion-label>Date</ion-label> 
     <ion-select [(ngModel)]="Date" (ionChange)='date($event)' name="date"> 
      <ion-option *ngFor="let item of data" [value]="item.time">{{item.time}}</ion-option> 
     </ion-select> 
    </ion-item> 
</ion-list>

// JSON样品

{ 
    "docs": [ 
    { 
     "time": "20170811", 
     "Cube": [ 
     { 
      "currency": "USD", 
      "rate": "1.1765" 
     }, 
     { 
      "currency": "JPY", 
      "rate": "128.41" 
     }, 
     { 
      "currency": "BGN", 
      "rate": "1.9558" 
     }, 
     { 
      "currency": "CZK", 
      "rate": "26.155" 
     }, 
     { 
      "currency": "DKK", 
      "rate": "7.437" 
     }, 
     { 
      "currency": "GBP", 
      "rate": "0.90645" 
     }, 
     { 
      "currency": "HUF", 
      "rate": "305.41" 
     }, 
     { 
      "currency": "PLN", 
      "rate": "4.2888" 
     }, 
     { 
      "currency": "RON", 
      "rate": "4.5778" 
     }, 
     { 
      "currency": "SEK", 
      "rate": "9.6083" 
     }, 
     { 
      "currency": "CHF", 
      "rate": "1.132" 
     }, 
     { 
      "currency": "NOK", 
      "rate": "9.3975" 
     }, 
     { 
      "currency": "HRK", 
      "rate": "7.3982" 
     }, 
     { 
      "currency": "RUB", 
      "rate": "70.6275" 
     }, 
     { 
      "currency": "TRY", 
      "rate": "4.1765" 
     }, 
     { 
      "currency": "AUD", 
      "rate": "1.4962" 
     }, 
     { 
      "currency": "BRL", 
      "rate": "3.7378" 
     }, 
     { 
      "currency": "CAD", 
      "rate": "1.4956" 
     }, 
     { 
      "currency": "CNY", 
      "rate": "7.8414" 
     }, 
     { 
      "currency": "HKD", 
      "rate": "9.1992" 
     }, 
     { 
      "currency": "IDR", 
      "rate": "15722.96" 
     }, 
     { 
      "currency": "ILS", 
      "rate": "4.2171" 
     }, 
     { 
      "currency": "INR", 
      "rate": "75.496" 
     }, 
     { 
      "currency": "KRW", 
      "rate": "1346.47" 
     }, 
     { 
      "currency": "MXN", 
      "rate": "21.1711" 
     }, 
     { 
      "currency": "MYR", 
      "rate": "5.0531" 
     }, 
     { 
      "currency": "NZD", 
      "rate": "1.6149" 
     }, 
     { 
      "currency": "PHP", 
      "rate": "60.033" 
     }, 
     { 
      "currency": "SGD", 
      "rate": "1.6052" 
     }, 
     { 
      "currency": "THB", 
      "rate": "39.107" 
     }, 
     { 
      "currency": "ZAR", 
      "rate": "15.8741" 
     } 
     ] 
    }, 
    { 
     "time": "20170810", 
     "Cube": [ 
     { 
      "currency": "USD", 
      "rate": "1.1732" 
     }, 
     { 
      "currency": "JPY", 
      "rate": "128.76" 
     }, 
     { 
      "currency": "BGN", 
      "rate": "1.9558" 
     }, 
     { 
      "currency": "CZK", 
      "rate": "26.157" 
     }, 
     { 
      "currency": "DKK", 
      "rate": "7.4381" 
     }, 
     { 
      "currency": "GBP", 
      "rate": "0.90303" 
     }, 
     { 
      "currency": "HUF", 
      "rate": "305.37" 
     }, 
     { 
      "currency": "PLN", 
      "rate": "4.2717" 
     }, 
     { 
      "currency": "RON", 
      "rate": "4.5743" 
     }, 
     { 
      "currency": "SEK", 
      "rate": "9.568" 
     }, 
     { 
      "currency": "CHF", 
      "rate": "1.1341" 
     }, 
     { 
      "currency": "NOK", 
      "rate": "9.3355" 
     }, 
     { 
      "currency": "HRK", 
      "rate": "7.4008" 
     }, 
     { 
      "currency": "RUB", 
      "rate": "70.2875" 
     }, 
     { 
      "currency": "TRY", 
      "rate": "4.1462" 
     }, 
     { 
      "currency": "AUD", 
      "rate": "1.4888" 
     }, 
     { 
      "currency": "BRL", 
      "rate": "3.7024" 
     }, 
     { 
      "currency": "CAD", 
      "rate": "1.4923" 
     }, 
     { 
      "currency": "CNY", 
      "rate": "7.8068" 
     }, 
     { 
      "currency": "HKD", 
      "rate": "9.168" 
     }, 
     { 
      "currency": "IDR", 
      "rate": "15670.45" 
     }, 
     { 
      "currency": "ILS", 
      "rate": "4.2182" 
     }, 
     { 
      "currency": "INR", 
      "rate": "75.208" 
     }, 
     { 
      "currency": "KRW", 
      "rate": "1341.21" 
     }, 
     { 
      "currency": "MXN", 
      "rate": "21.0547" 
     }, 
     { 
      "currency": "MYR", 
      "rate": "5.0348" 
     }, 
     { 
      "currency": "NZD", 
      "rate": "1.6142" 
     }, 
     { 
      "currency": "PHP", 
      "rate": "59.567" 
     }, 
     { 
      "currency": "SGD", 
      "rate": "1.6" 
     }, 
     { 
      "currency": "THB", 
      "rate": "39.021" 
     }, 
     { 
      "currency": "ZAR", 
      "rate": "15.674" 
     } 
     ] 
    } 
    ] 
}

来源

2017-08-13 eohdev

有永远只是一个对象，具有特定的日期，我猜是这样？ – Alex

是的，它们都是唯一指定的日期 – eohdev

在这种情况下我会假设，基于该数据，有总是只有一个具有特定日期的对象。

然后，我们可以很容易地使用find()来获取该对象，并显示该特定日期的rate和currency。

所以你select保持不变，而改变事件是这样的：

date(date) { 
    this.filteredDate = this.data.find(x => x.time === date); 
}

然后在模板中，我们可以只显示阵列Cube，也就是现在的filteredDate属性的内容。我们当然需要设置if，如果没有匹配的对象，那么列表将不会显示。所以，做这样的事情：

<ion-list *ngIf="filteredDate"> 
    <ion-item *ngFor="let item of filteredDate.Cube"> 
    Currency: {{item.currency}}, Rate: {{item.rate}} 
    </ion-item> 
</ion-list>

DEMO：http://plnkr.co/edit/1xwhtwB5YjKHDbRzusHP?p=preview

来源

2017-08-14 10:04:30 Alex

谢谢，这个作品 – eohdev

很高兴听到！ :) – Alex

角2阵列：分类成基于用户输入

回答

相关问题