2016-03-08 3 views
1

Я работаю над проектом, в котором я хочу преобразовать идентификатор enum из бэкэнд в форму строки, чтобы сделать его более понятным для 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; 
    } 
} 

Надежда кто-то может помочь или указать меня к правильному решению.

____ EDIT: _____

Как новичок это то, что я понял из ответа Гюнтера 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); 
      }); 
     }); 
    } 
} 

ответ

0

Вы не можете сделать код, ожидающий завершения асинхронного вызова.

Я не пробовал строить такую ​​трубу, которая сама по себе дает обещание, но если она вообще может работать, тогда возвращайте обещание, которое завершается, когда приходит значение.

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

Вам может понадобиться использовать async трубы в дополнение к пользовательской трубе.

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

Спасибо, ответ. Я привязался к вашему ответу, но теперь я получаю пустой результат. Возможно, вы могли видеть, что я делаю неправильно. Я добавил свой код в вопрос. – Habber

+0

Я реализовал простой пример. https://plnkr.co/edit/2LupLi?p=preview. Кажется, хорошо работает. '| async' требуется, чтобы он работал. –

+0

Я вижу, что демо работает, но кажется, что HTTP не срабатывает, когда внутри Promise. – Habber

Смежные вопросы