如何以来自另一个 http 请求的数据作为参数显示 http 请求数据？

Question

您好，我正在尝试输出多个带有标题的引导程序 3 面板，并使用 angular2 从 Web api 获取数据的列表项

我的 service.ts 中的函数：

通过以下函数，我得到一个包含面板标题的 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;
                        }
                    );
                }
            );

    }

然后我尝试编写一个函数，它将组件值（列表项）作为数组返回并使用嵌套的 *ngFor 循环输出它们。

 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.. 我也显然不知道'还不了解 observables

Answer 1

你可以从getComponentValues 方法返回一个observable，每个组件都会调用它。并将其用于内部 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);
}