Question

如何从一个可观察的结果得到一个结果..我可以轻松地使用ngFor来循环大量的结果但是如果我想在页面的某个部分输出一个结果那么另一个结果我怎样才能实现这个

我的服务类中的main函数是以下获取数据的函数

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

返回此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>

然而，这会一个接一个地输出结果..我希望能够把let say homepage_reasons [0] .image输出第一张图像

Answer 1

放一个* ngIf，它等待确保在尝试查找第0个元素之前定义了homepage_reasons

<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

更新Angular 5

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，该值从传递给image

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>

使用模板

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

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

Plunker example

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

3 个答案: