在Angular2使用异步管道与ngFor问题

问题描述：

终极目标是使用动态创建的嵌套ngFor的。
我尝试创建一系列的下拉菜单，每个取决于previous之一。下拉菜单的确切数目是未知的，动态创建的。例如：

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 menus is unknown and created dynamically. Example:

<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>

整个事情失败在下拉[nr.id]这似乎与异步管工作。
我逛了一下出场：

The whole things fails at Dropdown[nr.id] which does not seem to work with async pipe. I played around a bit:

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

这是如何得到这个工作任何想法？

Any ideas on how to get this working?

答

OK，设法解决它自己。只需创建一个自定义的管道和传递的参数在我的情况：

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

然后输入：

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'"

在Angular2使用异步管道与ngFor问题

相关推荐