输出单个数组结果，不使用 ngFor

Question

你如何从一个可观察的结果中得到一个结果..我可以很容易地使用 ngFor 循环很多结果但是如果我想在页面的某个部分输出一个结果然后另一个结果我怎么能实现这个

我的服务class中的主要功能是获取数据

    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');
    }

哪个returns这个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"
            }]
        }

我可以使用这个访问数据没问题

  <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>

然而，这会一个接一个地输出结果。我希望能够让我们说 homepage_reasons[0].image 来输出第一张图像

Answer 1

放置一个 *ngIf，这样它会等待以确保 homepage_reasons 已定义，然后再尝试找到第 0 个元素

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

Answer 2

您可以从您的组件而不是从服务订阅。

服务

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

组件

export class SomeClassComponent {
    things: SomeDataType[];

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

现在您可以摆脱模板中的异步管道，您可以使用：

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

或者无论你想做什么。有帮助吗？

Answer 3

更新Angular5

ngOutletContext 已重命名为 ngTemplateOutletContext

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

原创

您可以使用ngTemplateOutlet

创建模板

在您的组件模板中的某处创建一个模板元素，其中包含您希望如何呈现项目的结构。

模板也可以从外部传入，使用

constructor(private tmpl:TemplateRef) {}

或

@ContentChild(TemplateRef) tmpl:TemplateRef;

我们添加了一个模板变量用于简单的兄弟引用#hpReasons
应该可用的变量需要声明。 let-image 声明了一个局部变量 image，该变量保存来自传递给 ngOutletContext

image

  <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>

使用模板

要实际呈现项目，请使用 ngTemplateOutlet 引用 TemplateRef 并使用 ngOutletContext 传递数据项

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

Plunker example

输出单个数组结果，不使用 ngFor

Output individual array results, not using ngFor

angular

angular2-template

angular2-directives

angular2-services