InvalidPipeArgument：'[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，

Question

I am trying to load service data in ngfor through async pipe but i am facing an issue: this is my component:

    <app-book-list *ngFor="let app of apps | async | serachBox:searchBooksByName | filterSearch:showTechBooks:showMgmBooks:showFictionBooks " 
  [bookdetails]="app"></app-book-list>

In this component apps is supposed to come from service.

In My component.ts file:

     public apps= [];
  ngOnInit() {
    this.ServerService.getBookDetails()
      .then((data)=>{
        this.apps = data;
      })
  }

And below is the promise:

getBookDetails(){

let promise = new Promise((resolve,reject)=>{
   return this.http.get('https://lib-http-ng.firebaseio.com/bookdetails.json')
        .toPromise()
        .then((res)=>{
            const data = Object.values(res.json());
            resolve(data[0])
        })

})
return promise;

} I am getting an error related to async pipe.

1.

  Type '{}' is not assignable to type 'Promise<any>'.

Answer 1

this.ServerService.getBookDetails()
  .then((data)=>{
    console.log(data);
    this.apps =  data;
  })

should be

this.apps = this.ServerService.getBookDetails()

or remove | async | async