Question

我使用<select>来显示我从网络服务中检索的数据列表。

这是Web服务返回的内容：

[
    {
        "id": 1,
        "description": "something"
    }
    ...and so on...
]

这是HTML文件：

<select>
    <option *ngFor="let option of options | async" [value]="option.id">
        {{option.description}}
    </ion-option>
</ion-select>

这是TS文件的相关部分：

options: Observable<any>;
ngOnInit() {
    this.options = this.http.get('/web/service/url');
}

它和预期的一样。

但是，Web服务已更改，现在返回如下内容：

{
    data: [
        {
            "id": 1,
            "description": "something"
        }
        ...and so on...
    ],
    page: 1,
    count: 10,
    total: 100
}

我可以通过订阅get调用并将<select>绑定到属性来再次使result.data工作。但是，我想继续使用异步管道。有办法吗？

Answer 1

我想， service.ts

>  public optionsGetAll(): Observable<Options[]> {
>     let headers = new Headers();
>     headers.append('x-access-token', this.auth.getCurrentUser().token);
>     return this.http.get(Api.getUrl(Api.URLS.optionsGetAll), {
>       headers: headers
>     })
>       .map((response: Response) => {
>        let res = response.json();
> 
>         if (res.StatusCode === 1) {
>           this.auth.logout();
>         } else {
>           return res.StatusDescription.map(option=> {
>             return new Options(option);
>           });
>         }
>       });   }

component.ts

 ngOnInit() {
    this.ws.optionsGetAll().subscribe(
      options=> {
        this.options= options;
      }
    );
  }

Answer 2

试试这个

<select *ngIf="(options | async) as _options">
   <option *ngFor="let option of _options.data" [value]="option.id">
      {{option.description}}
   </ion-option>
</ion-select>

我们在这里制作局部变量，当设置选项时，我们创建选项。

在Angular 2+中具有嵌套可迭代的异步管道

2 个答案: