角度2-無效的管道參數：管道'Async Pipe'的管道

Question

在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);
}

}

在服務中

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

我遇到此錯誤：管道'Async Pipe'的管道參數無效：“

Answer 1

您的*ngFor引用的是可觀察的，而不是其中的數據。 在ngIf ，可以正確地ngIf數組，但是如果要使用數組中的值，則應將結果聲明為變量，請執行以下操作： optionsArr | async as options optionsArr | async as options <-注意as關鍵字。 然后繼續使用子元素中的options作為對數組的引用。 因此，您的*ngFor將變為*ngFor="let option of options"