Question

我有一个简单的http服务，可以带给我收藏品：

 @Injectable({
    providedIn: 'root'
 })
 export class PostService {
   constructor(private http: HttpClient) { }
   getPosts(): Observable<Array<any>> {
      return this.http.get<Array<any>>(`http://localhost:9000/posts`);
   }
 }

根据Angular文档，我可以通过两种方式使用“ * ngFor”在我的组件中显示此集合：
或者：

@Component({
  selector: 'app-root',
  template: '<div *ngFor="let post of posts">{{post.title}}</div>'
})
export class AppComponent {
  posts: any[];
  constructor(public postService: PostService) {}
  ngOnInit() {
    this.postService.getPosts().subscribe(_posts => this.posts= _posts);
  }
}

或使用“异步”过滤器：

@Component({
  selector: 'app-root',
  template: '<div *ngFor="let post of posts$ | async">{{post.title}}</div>'
})
export class AppComponent {
  posts$: Observable<Array<any>>;
  constructor(public postService: PostService) {}
  ngOnInit() {
    this.posts$ = this.postService.getPosts()
  }
}

我的问题是：为什么按以下方式书写是错误的？（这可以使所有“ ngOnInit事物”都可以幸免）：

@Component({
  selector: 'app-root',
  template: '<div *ngFor="let post of postService.getPosts() | async">{{post.title}}</div>'
})
export class AppComponent {
  posts$: Observable<Array<any>>;
  constructor(public postService: PostService) {}
}

我可以看到它向服务器发送了无休止的请求，但是为什么呢？

谢谢

为什么使用异步过滤器导致无休止的请求？

0 个答案: