Ausgabe einzelner Array-Ergebnisse, nicht mit ngFor

Question

Wie erhalten Sie ein Ergebnis von einer beobachtbaren .. Ich kann ngFor problemlos verwenden, um viele Ergebnisse zu durchlaufen, aber wenn ich ein Ergebnis in einem bestimmten Teil der Seite dann ein anderes ausgeben möchte zur Folge haben, wie ich dies erreichen können

die Hauptfunktion in meiner Dienstklasse ist die folgende, die die Daten

public getData() { 
     this._http.get(this.apiStatic).map(response => response.json()).subscribe(data => { 
      this._dataStoreHomepageReasons.homepage_reasons = data.homepage_reasons; 
      this._HomepageReasonsObserver.next(this._dataStoreHomepageReasons.homepage_reasons); 
     }, error => console.log('Could not load projects.'), 
     () => 'done'); 
    } 

die diese json

 { 
      "homepage_reasons": [{ 
       "id": 1, 
       "color": "", 
       "heading": "section one", 
       "paragraph": "<p>\n quote goes here\n  <\/p>", 
       "image": "http:\/\/www.site.com\/\/2016-06\/9emjhxh4ch3nlbrkpph90v3spzkc1msw9dhm7op9.png" 
      }, { 
       "id": 2, 
       "color": "", 
       "heading": "section one", 
       "paragraph": "<p>\n quote goes here\n  <\/p>", 
       "image": "http:\/\/www.site.com\/\/2016-06\/9emjhxh4ch3nlbrkpph90v3spzkc1msw9dhm7op9.png" 
      }, { 
       "id": 3, 
       "color": "", 
       "heading": "section one", 
       "paragraph": "<p>\n quote goes here\n  <\/p>", 
       "image": "http:\/\/www.site.com\/\/2016-06\/9emjhxh4ch3nlbrkpph90v3spzkc1msw9dhm7op9.png" 
      }] 
     } 

ich Zugriff zurück bekommt kann die Daten dies kein Problem

<div class="inner" *ngFor="let h of homepage_reasons | async">> 
    <blockquote> 
     <p>{{h.image}}</p> 
     <footer> 
     <cite> 
      <div class="subheading">{{h.heading}}</div><small>iQuate</small> 
     </cite> 
     </footer> 
    </blockquote> 
    </div> 

Doch diese gibt die Ergebnisse einer nach dem anderen in einer Reihe mit .. ich setzen können, wollen können sagen homepage_reasons [0] .image zum Ausgeben des ersten Bildes

Answer 1

Sie finden können von Ihrer Komponente abonnieren anstatt aus dem Dienst.

Dienst

private getData(): Observable<SomeDataType[]> { 
    return this.http.get(this.api_url).map(response => response.json()); 
} 

Komponente

export class SomeClassComponent { 
    things: SomeDataType[]; 

.subscribe(
    things => this.things = things, 
    error => console.log('Could not load projects.'), 
    () => 'done'); 

Jetzt können Sie von der Asynchron-Rohr in Ihrer Vorlage loszuwerden, und Sie können verwenden:

<img src="things[1]"> 
<img src="things[2]"> 

Or was auch immer du bist versuchen zu tun. Hilft das?

Answer 2

Setzen Sie ein * ngIf, so es sicher zu machen wartet, dass homepage_reasons bevor Sie versuchen, definiert das 0-te Element

<p *ngIf="homepage_reasons">{{homepage_reasons[0].image}}<p> 

Answer 3

Update Angular 5

ngOutletContext zu ngTemplateOutletContext

See https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

auch Sie können mit umbenannt wurde ngTemplateOutlet

Erstellen der Vorlage

• ein Template-Element in Ihrer Komponenten Vorlage erstellen irgendwo, die die Struktur enthält, wie Sie ein Element machen möchten.

  Die Vorlage kann auch von außen geführt werden und erwarb

constructor(private tmpl:TemplateRef) {} 

oder

@ContentChild(TemplateRef) tmpl:TemplateRef; 

• Wir fügen eine Template-Variable für einfache Geschwister Referenz #hpReasons

  mit

• Die Variablen, die verfügbar sein sollen, müssen deklariert werden. let-image deklariert eine lokale Variable image, die den Wert von image aus dem Wert zu ngOutletContext

<template #hpReasons let-image="image" let-heading="heading"> 
    <div class="inner">> 
     <blockquote> 
     <p>{{image}}</p> 
     <footer> 
      <cite> 
      <div class="subheading">{{heading}}</div><small>iQuate</small> 
      </cite> 
     </footer> 
     </blockquote> 
    </div> 
    </template> 

Verwenden Sie die Vorlage auf eine

Um tatsächlich zu machen ein Element ngTemplateOutlet verwenden verweisen weitergegeben hält TemplateRef und ngOutletContext zum Übergeben eines Datenelements

<template [ngOutletContext]="hpReasons" [ngOutletContext]="(homepage_reasons | async)[2]"></template> 

Plunker example