角度2-无效的管道参数:管道'Async Pipe'的管道

时间:2018-07-09 10:55:19

标签: angular asynchronous pipe

在component.html

<select name="select1" *ngIf="optionsArr | async">
    <option *ngFor="let option of optionsArr">{{option}}</option>
</select>

在component.ts

export class ComponentX implements OnInit {
optionsArr = [];

constructor(private service : ServiceX) { }

ngOnInit() { 
   this.optionsArr = this.service.getJSON(filepath);
}

}

在service.ts

export class ServiceX {
   constructor() {}
   getJSON(filepath){
      return Observable.create((observer:any) =>{
          //retrieve JSON here
          observer.next(jsonArr);
          observer.complete();
      });
   }
}

我有此错误: 无效的管道参数:“”代表管道“异步管道”

1 个答案:

答案 0 :(得分:2)

您的*ngFor引用的是可观察的,而不是其中的数据。 在ngIf中,您可以正确地通过管道传递数组,但是如果要使用数组中的值,则应将结果声明为变量,请执行以下操作:optionsArr | async as options <-注意as关键词。然后继续在子元素中使用options作为对该数组的引用。这样您的*ngFor会变成*ngFor="let option of options"