Verwenden ngFor

Question

durch ein „komplexes“ Objekt iterieren

Grundsätzlich I-Daten in einer JSON Datei als Objekt gespeichert bin, in dem folgende Format:

{ 
    "name": { 
     "source1": ____, 
     "source2": ____, 
     "source3": ____ 
    }, 
    "xcoord": { 
     "source1": ____, 
     "source2": ____, 
     "source3": ____ 
    } 
} 

I this strategy verwendet (geh zu „mehr gleichzeitigen Ausführen von http fordert "), die JSON-Daten über einen Dienst in meine Komponente zu laden.

Jetzt brauche ich eine ngFor Anweisung, um durch die "Name" -Taste zu durchlaufen, die Namen Werte für jede Quelle. Ich möchte alle diese Namen in einem <select> anzeigen. Ich möchte auch die value für jede <option>, die "source1", "source2", "source3" in der "Name" -Schlüssel des Datenobjekts sein.

Ich bin nicht wirklich sicher, wie ich darüber gehen sollte, und ich bin etwas mit Typoskript/Angular2 nicht vertraut. Was ist die beste Strategie, um das zu tun, was ich will? Vielleicht sollte ich eine Pipe für die ngFor-Anweisung machen, um mein Objekt als ein Array zu lesen? Oder vielleicht sollte ich eine neue Klasse erstellen, die die Daten neu formatiert und nur ein Array von Namen zurückgibt?

Was auch immer der bessere Ansatz ist, ich weiß leider nicht, wie man beides tut. Ich würde etwas Hilfe schätzen!

Answer 1

Ich brauche eine ngFor Aussage über den „Namen“ Schlüssel iterieren, für jede Quelle die Namenswerte Rückkehr

über iterieren die name Sie benötigen sie für den Zugriff auf jsonObject.name mit denen eine zurückkehren Objekt.

Object.keys wird ein Array seiner Eigenschaften zurückgeben.

forEach wird eine Schleife über die Anordnung verwendet

var selectOptions = ''; 
var _getName = jsonObject.name; // will return value of name object 
Object.keys(_getName).forEach(function(item){ 
selectOptions +='<option value ="'+_getName[item]+'">'+(_getName[item])+'</option>';}) 
$("#someSelectId").append(selectOptions) 

JSFIDDLE