Problemi nell'uso della pipe asincrona con ngFor in Angular2

Question

L'obiettivo finale è quello di utilizzare nidfg nidificati creati in modo dinamico. Provo a creare una serie di menu a discesa, ognuno in base al precedente. Il numero esatto di menu a discesa è sconosciuto e creato dinamicamente. Esempio:

<form [ngFormModel]="dropDownForm" (ngSubmit)="onSubmit()"> 
    <div *ngFor="#nr of numberOfDropdowns"> 
     <label>{{nr.name}}</label> 
     <select [ngFormControl]="dropDownForm.controls[i]"> 
      <option *ngFor="#item of Dropdown[nr.id] | async" value="{{item.value}}">{{item.name}}</option> 
     </select> 
    </div> 
    <button type="submit">Submit</button> 
</form> 

Le cose intere non riesce a discesa [nr.id] che non sembra funzionare con tubo asincrono. ho giocato un po 'intorno:

{{myAsyncObject | async}} //works 
{{myAsyncObject['prop1'] | async}} //fails silently 
{{myAsyncObject['prop1']['prop2'] | async}} // EXCEPTION: TypeError: Cannot read property 'prop2' of undefined in [null]  

Tutte le idee su come ottenere questo lavoro?

Answer 1

OK, sono riuscito a risolverlo da solo. È sufficiente creare un tubo di costume e passare i parametri in Nel mio caso:.

import {Pipe, PipeTransform} from 'angular2/core'; 
@Pipe({ 
    name: 'customPipe' 
}) 
export class CustomPipe implements PipeTransform { 
    transform(obj: any, args: Array<string>) { 
     if(obj) { 
      return obj[args[0]][args[1]]; 
     } 
    } 
} 

quindi importare:

import {CustomPipe} from '../pipes/custompipe' 
@Component({ 
    selector: 'mypage', 
    templateUrl: '../templates/mytemplate.html', 
    pipes: [CustomPipe], 
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
}) 

ed impiego:

*ngFor="#obj of myAsyncObject | async | customPipe:'prop1':'prop2'" 

Answer 2

Voglio solo aggiungere un'alternativa che ha funzionato per me (senza tubo aggiuntivo necessario):

*ngFor="#obj of (myAsyncObject | async)?.prop1?.prop2"