Проблемы с использованием async-канала с ngFor в Angular2
Конечная цель - использовать вложенные ngFor, созданные динамически.
Я пытаюсь создать серию выпадающих меню, каждая в зависимости от предыдущей. Точное количество выпадающих меню неизвестно и создается динамически. Пример:
<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>
В Dropdown [nr.id] не все работает, что, похоже, не работает с асинхронным каналом.
Я немного поиграл:
{{myAsyncObject | async}} //works
{{myAsyncObject['prop1'] | async}} //fails silently
{{myAsyncObject['prop1']['prop2'] | async}} // EXCEPTION: TypeError: Cannot read property 'prop2' of undefined in [null]
Любые идеи о том, как это сделать?
Ответы
Ответ 1
ОК, удалось решить это сам. Просто создайте настраиваемый канал и передайте параметры. В моем случае:
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]];
}
}
}
Затем импортируйте:
import {CustomPipe} from '../pipes/custompipe'
@Component({
selector: 'mypage',
templateUrl: '../templates/mytemplate.html',
pipes: [CustomPipe],
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
и используйте:
*ngFor="#obj of myAsyncObject | async | customPipe:'prop1':'prop2'"
Ответ 2
Просто хочу добавить альтернативу, которая сработала для меня (нет необходимости в дополнительной трубе):
*ngFor="#obj of (myAsyncObject | async)?.prop1?.prop2"