Ionic2-Array-Zugriff in Vorlage

Question

Ich versuche, Daten in meiner Vorlage von einem json in der Steuerung zu zeigen.

Alle Alternativen, die ich gefunden habe, beziehen sich auf die Verwendung von ngFor, aber ich möchte nicht alle Elemente iterieren, weil ich nur eine von ihnen zeigen möchte.

getServicio(servicioId: number) { 
     let getServicio = 'services?id=' + servicioId; 
     this.http.getRequest(getServicio) //returns a json 
      .then(
      res => { 
       this.services = res[0]; 
      } 
      ) 
      .catch(
      error => console.log(error) 
      ); 
    } 

Und in der Vorlage schreibe ich einfach:

{{services.id}} 

Es gibt mir eine Fehlermeldung:

Cannot read property 'id' of undefined

Gibt es keine Alternative, es zu tun? Oder in einer anderen Art und Weise, vorbei an all die Daten an die Vorlage und den Einstieg in das Array mit einem Index wie:

{{services[0].id}} 

Vielen Dank im Voraus!

Answer 1

Das Problem ist, dass Sie versuchen, Daten anzuzeigen (services.id), bevor es ankommt (HTTP-Anforderungen sind asynchron) - was bedeutet services.id ist undefined zum Zeitpunkt der Vorlage gerendert wird. Einfachste Lösung ist die Verwendung sichere Navigation Operator (?) zu „schützen“ die Vorlage, bis die Daten ankommen:

{{services?.id}} 

Sie auch ngIf Richtlinie verwenden können, so dass der Teil der Vorlage, wo Sie services angezeigt werden sollen ist nicht gerenderte bis services definiert:

<div *ngIf="services"> 
    {{services?.id}} 
</div> 

mehr über eine sichere Navigation Operator lesen (?) here und mehr über ngIf Richtlinie here.