Angular2 - 管道转换枚举形式 API

Question

我正在做一个项目，我想将后端的枚举 ID 转换为字符串形式，以便前端更容易理解。

为此我想使用管道。管道应该与 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 的回答中了解到的。这 returns 在我看来没什么。

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

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

我自己还没有尝试构建这样一个 return 是一个承诺的管道，但如果它可以工作，那么 return 一个在值到达时完成的承诺。

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

Angular2 - Pipe converting enum form API

api

transform

pipe

angular