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

Question

In component.html

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

In component.ts

export class ComponentX implements OnInit {
optionsArr = [];

constructor(private service : ServiceX) { }

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

}

In service.ts

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

I have this error: Invalid Pipe Argument: '' for pipe 'Async Pipe'

Answer 1

Your *ngFor references the observable and not the data within. In your ngIf , you pipe the array correctly, but if you want to use the values from it you should declare the result as a variable, do this: optionsArr | async as options optionsArr | async as options <- Note the as keyword. Then proceed to use options in the child elements as a reference to the array. So your *ngFor would become *ngFor="let option of options"