Using async pipe with ngFor

Question

Ultimate goal is to use nested ngFor\'s created dynamically. I try to create a series of drop-down menus, each depending on the previous one. The exact number of drop-down m

Answer 1

OK, managed to solve it myself. Simply create a custom pipe and pass the parameters in. In my case:

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]];
        }
    }
}

Then import:

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

and use:

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

Answer 2

Just want to add an alternative that worked for me (no extra pipe necessary):

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