Angular2 - 管道轉換枚舉窗體API

我正在一個項目中，我想要將enum窗體後端的id轉換爲字符串窗體，以便更容易理解forntend。Angular2 - 管道轉換枚舉窗體API

爲此我想使用管道。管道應該通過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; 
    } 
}

希望有人能幫助或點我朝着正確的解決方案。

____編輯：_____

作爲一個新手，這是我從君特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); 
      }); 
     }); 
    } 
}

來源

2016-03-08 Habber

您無法讓代碼等待完成異步調用。

我還沒有嘗試過構建這樣一個管道，它自己會返回一個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>

來源

2016-03-08 11:35:25

謝謝你的答案。我按照你的答案打結，但我現在只能得到一個空的結果。也許你可以看到我做錯了什麼。我將我的代碼添加到問題中。 – Habber

我實現了一個簡單的例子。 https://plnkr.co/edit/2LupLi?p=preview。似乎工作正常。 '|異步'是必需的，使其工作。 –

我看到演示的作品，但似乎HTTP不被解僱時，無極裏面。 – Habber

Angular2 - 管道轉換枚舉窗體API

回答

相關問題