2016-03-19 1 views
1

Ich habe diese Antwort JSON von Firebase RückkehrWie strukturiere ich eine Typoskript-Schnittstelle für diesen Firebase-Antwort-JSON?

{ "-KD8Evk7TULU6t6zxMHl": { "createdAt": 1458296568840, "isActive": true, "title": "...add a title", "updatedAt": 1458296568840 } } 

Teil 1 der Frage: Wie soll ich meine Typoskript-Schnittstelle für die oben JSON strukturieren? Zum Beispiel, wie folgt?

export interface Hero { 
    [id: string]: { 
    createdAt: number; 
    isActive: boolean; 
    title: string; 
    updatedAt: number; 
    } 
} 

Teil 2 der Frage: Wie soll ich den Titel oder die ID eines Helden erhalten die empfohlene Typoskript Schnittstellenstruktur mit? Zum Beispiel möchte ich den Helden-ID und Held Titel

<html> 
    ...omitted code for simplicity. I want to display hero id and title below. 
    <h1> {{ hero.id }} </h1> 
    <h1> {{ hero.title }} </h1> 
</html> 
+1

Bitte teilen Sie sich in zwei separate Fragen auf. Das erlaubt auch einen, der sich nur um Angular2 und den anderen nur um Typescript dreht. –

+0

Ich werde es das nächste Mal besser machen. Danke für deine Erinnerung –

Antwort

1
  1. Teil 1

Sie auf diese Weise verwenden können, oder eine Klasse bauen, die eine andere Eigenschaft hat, um „keyId“, die die ID gespeichert werden erhalten von dem Firebase-Antwortobjekt ("-KD8Evk7TULU6t6zxMHl"). Im Konstruktor sollten Sie die keyId-Prop mit der empfangenen ID füllen. Es ist jedoch etwas komplizierter und muss für jede json-Zeile eine neue Klasse erstellen.

  1. Teil 2

Wenn Sie mit Ihrer Option 1 bleiben, dann müssen Sie von Ihrem Objekt lesen Sie das "Objekt" Klasse mit -> Held [Object.keys (Held) [0]]. Titel oder nur Object.keys (Held) [0] wenn Sie die ID wollen. Es ist ein bisschen nervig, aber ich kann keinen anderen Weg sehen, es sei denn, Sie ändern Ihre Schnittstelle zu einer Klasse mit Konstruktor, wie ich zuvor erwähnt habe, dann können Sie etwas wie held [helden.keyId] .title oder held.keyId für die ID gehen ;)

Verwandte Themen