Angular2-管道转换枚举表单API

我正在从事一个项目，我想将枚举表单的id从后端转换为字符串表单，以使FORNTED更容易理解

为此，我想用一根管子。 管道应该与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ünter Zö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);
            });
        });
    }
}

---

不能让代码等待异步调用完成

我还没有尝试构建这样一个管道来返回一个承诺，但是如果它能够工作，那么返回一个在值到达时完成的承诺

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

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

async

管道

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

{{item | userType | async}

不能让代码等待异步调用完成

我还没有尝试构建这样一个管道来返回一个承诺，但是如果它能够工作，那么返回一个在值到达时完成的承诺

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

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

async

管道

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

{{item | userType | async}

谢谢你的回答。我跟在你的答案后面，但我现在得到的结果是空的。也许你能看出我做错了什么。我在问题中添加了我的代码。我实现了一个简单的示例。看起来很好用<代码>| async是必须的。我看到了演示的效果，但在承诺内HTTP似乎没有被触发。我更新了Plunker（获取一些任意URL）很好，我开始工作了，我不确定我到底做了什么，但它工作了。谢谢你的回答。我跟在你的答案后面，但我现在得到的结果是空的。也许你能看出我做错了什么。我在问题中添加了我的代码。我实现了一个简单的示例。看起来很好用<代码>| async是必须的。我看到了演示的效果，但在承诺内HTTP似乎没有被触发。我更新了Plunker（获取一些任意URL）很好，我开始工作了，我不确定我到底做了什么，但它工作了。谢谢：）