Question

您好我尝试输出带有标题的多个bootstrap 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;
                        }
                    );
                }
            );

    }

然后我尝试编写一个函数，它将componentValues（list-items）作为数组返回，并使用嵌套的* 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>

但这似乎不起作用，因为在我不知道我是否在正确的轨道上或者实际上是哪种方法之前，我从未触及过角度2或角度。最好的做法..我显然也不了解可观察物

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

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

1 个答案: