2017-01-25 5 views
2

Btw, ich bin neu zu Typescript und Angular2.Schleife zu einem Objekt in Typescript

Ich habe einen Dienst, der ein Objekt des Typs PracticeTestList zurückgibt. Die Deklaration des Dienstes und des Objekts wird unten angezeigt.

Jetzt habe ich eine benutzerdefinierte Pipe, die das Objekt liest, wie unten gezeigt.

Die benutzerdefinierte Rohrklasse hat das Objekt empfangen, aber in für Schleife wird das Objekt als eine einzelne Linie String nicht als Objekt gelesen. Warum das?

Wie liest man das Objekt als Objekt dann in Typescript?

Dank

Dienst

getMyPracticeTest(uid: string){ 
    return this._http.get('http://localhost:49753/RestServiceImpl.svc/getMyPracticeTest/' + uid) 
    .map(data => { 
     data.json(); 
     // the console.log(...) line prevents your code from working 
     // either remove it or add the line below (return ...) 
     console.log("getMyPracticeTest >>>>>>> ", <PracticeTestList[]>data.json()); 
     return <PracticeTestList[]>data.json(); 
    }); 
} 

Objektdeklaration

import { Injectable } from '@angular/core'; 

@Injectable() 
export interface PracticeTestList { 
    Purchase_ID: number; 
    User_FK: number; 
    name: string; 
    price: number; 
    resteurant: string; 
    credit_card_number: string; 
    purchase_date : any; 
    Test_Status_FK: number; 
    child :string; 
} 

Individuelle Rohr

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'values'}) 
export class ValuesPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
     let keys = []; 

     for (let key in value) { 
      console.log("Key >>>> " + key + " value >>>>> " + value[key]); 
      keys.push({key: key, value: value[key]}); 
     } 

     return keys; 
    } 
} 

hinzugefügt Anmelden Innenrohr

Key >>>> 0 value >>>>> [ main.bundle.js:64502:13 
Key >>>> 1 value >>>>> { main.bundle.js:64502:13 
Key >>>> 2 value >>>>> " main.bundle.js:64502:13 
Key >>>> 3 value >>>>> P main.bundle.js:64502:13 
Key >>>> 4 value >>>>> u main.bundle.js:64502:13 
Key >>>> 5 value >>>>> r main.bundle.js:64502:13 
Key >>>> 6 value >>>>> c main.bundle.js:64502:13 
Key >>>> 7 value >>>>> h main.bundle.js:64502:13 
Key >>>> 8 value >>>>> a main.bundle.js:64502:13 
Key >>>> 9 value >>>>> s main.bundle.js:64502:13 
Key >>>> 10 value >>>>> e main.bundle.js:64502:13 
Key >>>> 11 value >>>>> _ main.bundle.js:64502:13 
Key >>>> 12 value >>>>> I main.bundle.js:64502:13 
Key >>>> 13 value >>>>> D main.bundle.js:64502:13 
Key >>>> 14 value >>>>> " main.bundle.js:64502:13 
Key >>>> 15 value >>>>> : main.bundle.js:64502:13 
Key >>>> 16 value >>>>> 1 main.bundle.js:64502:13 
Key >>>> 17 value >>>>> , main.bundle.js:64502:13 
Key >>>> 18 value >>>>> " 

Added HTML-Code

<table class="table" *ngIf="myPurchaseItems"> 
    <tr *ngFor="let entry of myPurchaseItems | values"> 
     <td>Key: {{entry.key}}, value: {{entry.value}}</td> 
    </tr> 
</table> 
+0

heißt es [Objektobjekt] oder etwas Ähnliches? – chrispy

+0

können Sie ein Protokoll darüber bereitstellen, was console.log (Wert) in Ihrer Pipe ist? – chrispy

+0

Können Sie bitte die Quelle Ihrer Vorlage posten? –

Antwort

4

Verwenden Object.keys zuerst die Schlüssel zu erhalten:

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ name: 'values' }) 
export class ValuesPipe implements PipeTransform { 
    transform(value): any { 
    let keys = Object.keys(value); 
    return keys.map(k => value[k]); 
    } 
} 

Sie könnenversuchen, um die Werte direkt zu erhalten, aber es wird möglicherweise noch nicht überall unterstützt.

Verwandte Themen