Question

我正在开发一个项目，我希望将后端的枚举的id转换为字符串形式，以便更容易理解forntend。

为此我想使用Pipe。管道应该与API联系，在那里它获取具有键和值的JSON对象。

我的问题是我似乎无法让转换函数等到我收到api数据并将其存储在变量中。

我知道如何联系api并获取对象。我做了一个改造，做我需要它做的事情。我只是不知道如何让两人一起谈话。

以下是我现在所拥有的：

import {Pipe, PipeTransform} from 'angular2/core';

import {ApiHelper} from '../../services/api.service';

@Pipe({ name: 'userType' })
export class userType implements PipeTransform {

    private typeObject;

    constructor(private ApiService: ApiHelper) {
        ApiService.getAllTypes().subscribe(
            types => this.storeTypes(types)
        );
    }

    storeTypes(types){
        this.typeObject = types;
    }

    transform(value: number, args: string[]): any {
        var userType;

        for(var type in this.typeObject){
            if(type.value == value){
                usertype = type.key;
            }
        }

        return userType;
    }
}

希望有人可以帮助或指出我正确的解决方案。

____编辑：_____

作为新手，我从GünterZöchbauer的回答中了解到这一点。这对我的观点没有任何回报。

import {Pipe, PipeTransform} from 'angular2/core';

import {ApiHelper} from '../../services/api.service';

@Pipe({ name: 'userType' })
export class userType implements PipeTransform {

    constructor(ApiService: ApiHelper)

    transform(value: number, args: string[]): any {

        return new Promise((resolve, reject) => {
             this.ApiService.getAllTypes().subscribe(typeObject => {

                var userType;
                for (var type in typeObject) {
                    if (type.value == value) {
                        usertype = type.key;
                    }
                }

                resolve(userType);
            });
        });
    }
}

Answer 1

您无法让代码等待异步调用的完成。

我没有尝试构建这样一个自己返回一个promise的管道，但如果它可以工作，那么返回一个Promise，当值到达时它会完成。

transform(value: number, args: string[]): any {
  return new Promise((resolve, reject) => { 
    http.get(...).map(...).subscribe(value => {
      ...
      resolve(theResult); 
    });
  });
}

除了自定义管道之外，您可能还需要使用async管道。

<div>{{item | userType | async}}</div>

Angular2 - 管道转换枚举形式API

1 个答案: