*ngFor 在对象 angular2 [重复]答案

【问题标题】：*ngFor on object angular2 [duplicate]*ngFor 在对象 angular2 [重复]
【发布时间】：2017-03-11 09:10:01
【问题描述】：

我从 api 获取 JSON 文件，

如您所见，在名为“rates”的对象内有一个对象不幸的是 *ngFor 只能在数组上遍历。我正在寻找可以得到“关键”和“价值”的东西喜欢

for(var var in obj)

例如访问“AUD:0.41852”

{
 "base":"BRL",s
 "date":"2016-10-27",
 "rates":{
 "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
 }

}

这是我的代码，rate 对象应该在最新的“ion-item”中

货币.html

<ion-header style="direction:rtl;">
  <ion-navbar>
    <ion-title>
      המרת מטבע
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding style="direction:rtl;">
  <ion-list>
    <ion-item>
      <ion-label>בחר מטבע:</ion-label>
      <ion-select okText="אשר" cancelText="בטל" [(ngModel)]="selectCurrencyInput">
        <ion-option value="BGN">BGN</ion-option>
        <ion-option value="BRL">BRL</ion-option>
        <ion-option value="CAD">CAD</ion-option>
        <ion-option value="CHF">CHF</ion-option>
        <ion-option value="CNY">CNY</ion-option>
        <ion-option value="CZK">CZK</ion-option>
        <ion-option value="DKK">DKK</ion-option>
        <ion-option value="GBP">GBP</ion-option>
        <ion-option value="HKD">HKD</ion-option>
        <ion-option value="HRK">HRK</ion-option>
        <ion-option value="HUF">HUF</ion-option>
        <ion-option value="IDR">IDR</ion-option>
        <ion-option value="ILS">ILS</ion-option>
        <ion-option value="INR">INR</ion-option>
        <ion-option value="JPY">JPY</ion-option>
        <ion-option value="KRW">KRW</ion-option>
        <ion-option value="MXN">MXN</ion-option>
        <ion-option value="MYR">MYR</ion-option>
        <ion-option value="NOK">NOK</ion-option>
        <ion-option value="NZD">NZD</ion-option>
        <ion-option value="PHP">PHP</ion-option>
        <ion-option value="ZAR">ZAR</ion-option>
        <ion-option value="PLN">PLN</ion-option>
        <ion-option value="RON">RON</ion-option>
        <ion-option value="RUB">RUB</ion-option>
        <ion-option value="SEK">SEK</ion-option>
        <ion-option value="SGD">SGD</ion-option>
        <ion-option value="THB">THB</ion-option>
        <ion-option value="TRY">TRY</ion-option>
        <ion-option value="USD">USD</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>כמות לחישוב</ion-label>
      <ion-input #amountCurrencyInput type="text"></ion-input>
    </ion-item>
    <button ion-button (click)="calc({selectedCurrency:selectCurrencyInput,amountCurrency:amountCurrencyInput.value})">
      חשב מטבע
    </button>
  </ion-list>
  <ion-list *ngIf="load" inset>
    <h2>שער המטח נכון להיום: <span>{{results.date}}</span></h2>
    <h3>המטבע הנבחר: {{results.base}}</h3>
    <ion-item>
      <!-- Object should run here.-->
    </ion-item>
  </ion-list>
</ion-content>

货币.ts

import {Component} from '@angular/core';
import {NetworkServices} from '../../services/network';


@Component({
  selector: 'currency-page',
  templateUrl: 'currency.html',
  providers: [NetworkServices]
})
export class CurrencyPage {
  public load: any;
  public results: any;

  constructor(public networkServices: NetworkServices) {
    this.load = false;
  }

  calc(details) {
    this.networkServices.getCurrency(details).then((result) => {
      this.load = true;
      this.results = result;
    });
  }
}

谢谢你们 :)

【问题讨论】：

标签： angular ionic-framework ngfor

【解决方案1】：

*ngFor 不适合用于对象，但您可以使用 Object.keys 解决此问题，不妨试试这个

<div *ngFor='let key of Object.keys(yourObject)'>
    <h3>{{yourObject[key].someProperty}}</h3>
</div>

【讨论】：

这可能是解决此问题的最佳解决方案，但您必须将 Object 暴露给视图以使其工作：private JSObject: Object = Object; 并像这样使用它：let key of JSObject.keys(yourObject)

【解决方案2】：

ngFor= "let x of results?.rates"

应该也可以。

【讨论】：

【解决方案3】：

您可以在组件上使用提取键或可重用管道的方法

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value) : any {
    if(!value) {
      return null;
    }
    return Object.keys(value);
  }
}

<div *ngFor="let key of someObject | keys">{{someObject[key]}}</div>

【讨论】：