* ngFor on object angular2 [复制]

前端之家收集整理的这篇文章主要介绍了* ngFor on object angular2 [复制]前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > How to iterate object keys using *ngFor?4个
我从api获取了一个JSON文件,

正如您所看到的,对象内部有一个名为“rates”的对象
不幸* ngFor只能在数组上走过.
我正在寻找能获得“关键”和“价值”的东西
喜欢

  1. for(var var in obj)

例如,访问“AUD:0.41852”

  1. {
  2. "base":"BRL",s
  3. "date":"2016-10-27","rates":{
  4. "AUD":0.41852,"BGN":0.57085,"CAD":0.42629,"CHF":0.31634,"CNY":2.1623,"CZK":7.8871,"DKK":2.1709,"GBP":0.26023,"HKD":2.4734,"HRK":2.1894,"HUF":90.257,"IDR":4156.5,"ILS":1.2256,"INR":21.311,"JPY":33.388,"KRW":364.6,"MXN":5.9721,"MYR":1.3381,"NOK":2.6227,"NZD":0.44646,"PHP":15.465,"PLN":1.2636,"RON":1.3146,"RUB":20.025,"SEK":2.8648,"SGD":0.44397,"THB":11.191,"TRY":0.98786,"USD":0.31893,"ZAR":4.4196,"EUR":0.29188
  5. }

}

这是我的代码,速率对象应该在最新的“离子项”中

currency.html

  1. <ion-header style="direction:rtl;">
  2. <ion-navbar>
  3. <ion-title>
  4. המרת מטבע
  5. </ion-title>
  6. </ion-navbar>
  7. </ion-header>
  8. <ion-content padding style="direction:rtl;">
  9. <ion-list>
  10. <ion-item>
  11. <ion-label>בחר מטבע:</ion-label>
  12. <ion-select okText="אשר" cancelText="בטל" [(ngModel)]="selectCurrencyInput">
  13. <ion-option value="BGN">BGN</ion-option>
  14. <ion-option value="BRL">BRL</ion-option>
  15. <ion-option value="CAD">CAD</ion-option>
  16. <ion-option value="CHF">CHF</ion-option>
  17. <ion-option value="CNY">CNY</ion-option>
  18. <ion-option value="CZK">CZK</ion-option>
  19. <ion-option value="DKK">DKK</ion-option>
  20. <ion-option value="GBP">GBP</ion-option>
  21. <ion-option value="HKD">HKD</ion-option>
  22. <ion-option value="HRK">HRK</ion-option>
  23. <ion-option value="HUF">HUF</ion-option>
  24. <ion-option value="IDR">IDR</ion-option>
  25. <ion-option value="ILS">ILS</ion-option>
  26. <ion-option value="INR">INR</ion-option>
  27. <ion-option value="JPY">JPY</ion-option>
  28. <ion-option value="KRW">KRW</ion-option>
  29. <ion-option value="MXN">MXN</ion-option>
  30. <ion-option value="MYR">MYR</ion-option>
  31. <ion-option value="NOK">NOK</ion-option>
  32. <ion-option value="NZD">NZD</ion-option>
  33. <ion-option value="PHP">PHP</ion-option>
  34. <ion-option value="ZAR">ZAR</ion-option>
  35. <ion-option value="PLN">PLN</ion-option>
  36. <ion-option value="RON">RON</ion-option>
  37. <ion-option value="RUB">RUB</ion-option>
  38. <ion-option value="SEK">SEK</ion-option>
  39. <ion-option value="SGD">SGD</ion-option>
  40. <ion-option value="THB">THB</ion-option>
  41. <ion-option value="TRY">TRY</ion-option>
  42. <ion-option value="USD">USD</ion-option>
  43. </ion-select>
  44. </ion-item>
  45. <ion-item>
  46. <ion-label>כמות לחישוב</ion-label>
  47. <ion-input #amountCurrencyInput type="text"></ion-input>
  48. </ion-item>
  49. <button ion-button (click)="calc({selectedCurrency:selectCurrencyInput,amountCurrency:amountCurrencyInput.value})">
  50. חשב מטבע
  51. </button>
  52. </ion-list>
  53. <ion-list *ngIf="load" inset>
  54. <h2>שער המטח נכון להיום: <span>{{results.date}}</span></h2>
  55. <h3>המטבע הנבחר: {{results.base}}</h3>
  56. <ion-item>
  57. <!-- Object should run here.-->
  58. </ion-item>
  59. </ion-list>
  60. </ion-content>

currency.ts

  1. import {Component} from '@angular/core';
  2. import {NetworkServices} from '../../services/network';
  3.  
  4.  
  5. @Component({
  6. selector: 'currency-page',templateUrl: 'currency.html',providers: [NetworkServices]
  7. })
  8. export class CurrencyPage {
  9. public load: any;
  10. public results: any;
  11.  
  12. constructor(public networkServices: NetworkServices) {
  13. this.load = false;
  14. }
  15.  
  16. calc(details) {
  17. this.networkServices.getCurrency(details).then((result) => {
  18. this.load = true;
  19. this.results = result;
  20. });
  21. }
  22. }

大家好:)

* ngFor不是用于对象,但你可以通过使用Object.keys来解决这个问题
  1. <div *ngFor='let key of Object.keys(yourObject)'>
  2. <h3>{{yourObject[key].someProperty}}</h3>
  3. </div>

猜你在找的Angularjs相关文章