如何显示HTTP请求数据，以及来自另一个HTTP请求的数据作为param

Question

嗨，我正在尝试输出带有标题的多个Bootstrap 3面板，并列出了Angular2从Web API

获取数据

在我的服务中功能：

使用以下功能，我将获得一个包含面板标题的JSON，这是我将使用

的组件

getComponents(type: string): Observable<string[]> {
    return this.http.get('http://localhost:14373/api/devices/components/' + type)
       .map((response: Response) => response.json());
}

，使用此功能，我将获得一个包含所有值的JSON，这将是列表项目

getComponentValues(type: string, component: string): Observable<string[]> {
   return this.http.get('http://localhost:14373/api/devices/components/' + type + '/' + component)
      .map((response: Response) => response.json());
}

在我的component.ts中，我在带有此函数的字符串数组中保存了组件（标题）的值

ngOnInit() {
        this.subscription = this.route.params
            .subscribe(
                (params: any) => {
                    this.currentType = params['type'];
                    this.deviceService.getComponents(this.currentType).subscribe(
                        (data: string[]) => {
                            this.components = data;
                        }
                    );
                }
            );
    }

然后，我尝试编写一个函数，该函数将返回componentValues（list-items）作为数组，然后用嵌套 *ngfor loop输出它们。

 getComponentValues(type: string, component: string) {
        this.deviceService.getComponentValues(type, component)
            .subscribe(
                (data: string[]) => {
                    return data;
                }
            )
    }

模板：

<div class="panel panel-default" *ngFor="let component of components">
    <!-- Default panel contents -->
    <div class="panel-heading">{{component}}</div>
    <!-- List group -->
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let val of getComponentValues(currentType, component)">
            {{val}}
        </li>
    </ul>
</div>

，但这似乎不起作用，因为我什至从未碰过Angular2或Angular't了解可观察到的

Answer 1

您只需从getComponentValues方法返回可观察到的方法，该方法将为每个组件均调用。并将其用于内部ngFor与async管道。

标记

<div class="panel panel-default" *ngFor="let component of components">
    <!-- Default panel contents -->
    <div class="panel-heading">{{component}}</div>
    <!-- List group -->
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let val of getComponentValues(currentType, component) | async">
            {{val}}
        </li>
    </ul>
</div>

代码

this.subscription = this.route.params
  .subscribe(
  (params: any) => {
    this.currentType = params['type'];
    this.deviceService.getComponents(this.currentType).subscribe(
      (data: string[]) => {
        this.components = data;
      }
    );
  }
);
getComponentValues(type: string, component: string) {
  return this.deviceService.getComponentValues(type, component);
}