2016-10-28 24 views
5
Bir API bir JSON dosyası alıyorum

,* ngFor nesne angular2

üzerine siz "oranları" unfortantly * ngFor dizinin yalnızca geçirebiliyorsun denilen bir nesne içinde bir nesne yoktur görebilirsiniz. Ben mesela

for(var var in obj) 

gibi "Anahtar" ve "Değerini" alabilirsiniz şey arıyorum erişmek "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 
} 

} burada

benim kodum, rate nesnesinin en son "iyon öğesi" olmalıdır.

currency.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> 

currency.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; 
    }); 
    } 
} 

thx Size bir :) ngFor nesnelere karşı kullanılmak üzere tasarlanmamıştır ancak Object.keys kullanarak bu çalışabilirsiniz *

cevap

7

, belki

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

Bu, bu sorunla ilgili etkileyicisi çözüm olabilir yeniden kullanılabilir bir boruyu özlerinin bileşeni üzerinde bir yöntemi kullanabilirsiniz, ancak 'Nesne maruz kalmaları '' özel JSObject: Object = Object; 've bunu şöyle kullanın:' JSObject.keys (yourObject) 'nin anahtarını bırakın – Zahema

0
ngFor= "let x of results?.rates" 

çok çalışmalıdır.

0

anahtarları veya

@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>