Angular中QueryRef可在模板用ngFor遍历，如何在TypeScript中实现？

Ah, I get it—you’re able to use the async pipe in your template to loop through posts no problem, but hitting a wall when trying to do the same in TypeScript. Let’s break down why this happens and fix it step by step.

Why the Error Occurs #

Your posts variable is a QueryRef<PostsInterface> (I’m assuming this is from Apollo Client). The async pipe in Angular does two critical things automatically for you:

1. It subscribes to the Observable/QueryRef to pull out the underlying data (which is an array of posts, since your template uses it with *ngFor).
2. It cleans up the subscription when the component is destroyed to prevent memory leaks.

In TypeScript though, you’re trying to iterate over the QueryRef object itself—not the array of posts it emits. Since QueryRef isn’t an iterable array, that’s why you’re seeing an error.

Solution 1: Subscribe to the QueryRef #

The most direct fix is to subscribe to the QueryRef (it implements the Observable interface) and iterate over the emitted post array inside the subscription callback:

import { Subscription } from 'rxjs';

// ...

private postsSubscription: Subscription;

ngOnInit() {
  this.posts = this._postService.get();
  
  // Subscribe to get the actual posts array
  this.postsSubscription = this.posts.subscribe((postsArray) => {
    // Now you can loop through the array like you did in the template
    for (let post of postsArray) {
      console.log(post.name);
      // Add your logic for each post here
    }
  });
}

// Clean up the subscription to avoid memory leaks
ngOnDestroy() {
  this.postsSubscription?.unsubscribe();
}

Solution 2: Use Async/Await (for One-Time Data Fetch) #

If you only need to fetch the posts once (and don’t care about future data updates), you can convert the Observable to a Promise with toPromise() (using first() to grab only the first emission):

import { first } from 'rxjs/operators';

// ...

async ngOnInit() {
  this.posts = this._postService.get();
  
  // Wait for the data to resolve
  const postsArray = await this.posts.pipe(first()).toPromise();
  
  // Iterate over the array
  for (let post of postsArray) {
    console.log(post.name);
    // Your post-specific logic here
  }
}

Quick Note on Typing #

If your PostsInterface represents a single post (not an array), you should adjust the type to QueryRef<Post[]> (where Post is your single-post interface) to make your code more type-safe and clear.

内容的提问来源于stack exchange，提问作者user3658434