Блог

Я столкнулся с классической проблемой http race, но я недостаточно знаком с Angular2 и Observable, чтобы разрешить мой случай.

Вот описание моих кирпичей :

 [ FormComponent ]
    |    |
   1|    |6
    |    |
[ MetadataService ] <----4 amp; 5----> [ TranslatorService ]
    |    |
   2|    |3
    |    |
 [ Backend ]
  

1. Мой компонент формы запрашивает у MetadataService метаданные формы
2. Metadataservice выполняет HTTP-вызов серверной части для извлечения этих метаданных
3. Серверная часть возвращает метаданные в формате JSON
4. MetadataService передает JSON в TranslatorService
5. TranslatorService выполняет некоторые переводы в формате JSON и возвращает массив в MetadataService
6. MetadataService возвращает массив в FormComponent.

Архитектура кажется простой, но что-то не так в том, как я это реализую, поскольку в итоге, на мой взгляд, свойство метаданных «не определено», и поэтому * ngFor выдает ошибку Моей первой идеей было подписаться на наблюдаемое в компоненте, но я не знаю, как справиться с этими наблюдаемыми, поскольку у меня есть два сервиса.

На мой взгляд, проблема возникает с 4-го шага :

MetadataService

 getFormMetaData(folderId: string, context: string){
    let body = JSON.stringify({
                   folderId: folderId,
                   context: context
               });
    return this.http.post(this.uri, body, options)
                            .map( (res) => { 
                                    let body = res.json();
                                    if (body.data){
                                        return this.translatorService.getTranslatedElements(body.data);
                                    }
                                } 
                            );
}
  

Он должен возвращать наблюдаемое, но метод map() возвращает значение TranslatorService, которое является массивом…

Как мне следует поступить?

Редактировать : Вот мой FormComponent :

FormComponent

 @Component({
    template: `
        <dynamic-form controls="formMetadata | async"></dynamic-form>
    `,
    providers: [MetadataService]
})
export class CustomerFormComponent {

    formMetadata: any; 

    constructor(private metadataService: MetadataService) { }

    ngOnInit() {
        this.formMetadata = this.formMetadataService.getFormMetadata('FR75P00000012', 'UserInformation');
    }
}
  

И мой TranslatorService :

TranslatorService

 getTranslatedElements(metadata: any) {
    debugger; // It never breaks here
    let elements = [];

    metadata.forEach( (field) => { 
        ...
        elements.push(field);
    } ) 

    return elements;

}
  

Обновить :

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

Должен ли этот дочерний компонент обрабатывать такого рода асинхронные данные также определенным образом?

Решение, как тратить часы на отладку: забудьте поместить свои свойства, связанные с данными, в квадратные скобки.

<dynamic-form controls="formMetadata"></dynamic-form>

должно быть

<dynamic-form [controls]="formMetadata"></dynamic-form>

Это объясняет, почему DynamicFormComponent получил строку в качестве входных данных…

Решение 2 На самом деле, у меня все еще была проблема с созданием экземпляра дочернего компонента еще до того, как функция subscribe загрузила данные. Я смог решить эту проблему, выполнив <dynamic-form [controls]="formMetadata" *ngIf="formMetadata"></dynamic-form>

Я не мог использовать асинхронный канал, он не работал. Я не знаю, когда асинхронный запуск в родительском шаблоне, но, похоже, это происходит после конструктора дочернего компонента () и noOnInit ()

Как описано в http://reactivex.io/documentation/operators/map.html

Оператор Map применяет выбранную вами функцию к каждому элементу, генерируемому исходным наблюдаемым объектом, и возвращает наблюдаемый объект, который генерирует результаты этих функциональных приложений.

Таким образом, MetadataService должен возвращать наблюдаемое значение того, что возвращает this.translatorService.getTranslatedElements(body.data); или наблюдаемое значение undefined в случае body.data пусто.