Angular：对象可与 ngFor 迭代，但不能在 Typescript 中迭代？

Question

我有以下几点：

public posts: QueryRef<PostsInterface>;

this.posts = this._postService.get(); //in ngOnInit

并在相应的HTML中：

<mat-card *ngFor="let post of posts | async">

然后可以使用 {{post.name}} 等在 html 中显示每个帖子的字段。

我的问题是，如何通过 typescript 中的帖子 QueryRef 实现相同的迭代？当我尝试以下操作时：

for (let post of this.posts) {
      console.log("Post name is: " + post.name);
    }

我收到错误"Type 'QueryRef<PostsInterface, Record<string, any>>' is not an array type or a string type." 如果 ngFor 能够遍历 QueryRef，那么在 typescript 本身中一定有一些方法可以做到吗？

最终我想用分页器在表格中显示数据。使用 mat-table 无法实现这一点。有没有在 mat-table 中显示使用 apollographql 抓取的数据的示例？

更新： 我尝试像这样订阅 ngOnInit：

this.posts.valueChanges.subscribe((post1: ApolloQueryResult<PostsInterface>) => {
        console.log("name is: "+ post1.name)
    });

但这给出了错误：“ApolloQueryResult”类型上不存在属性“名称”。同样，如上所述，在使用 *ngFor 和异步管道进行迭代时，可以毫无问题地访问此属性。

第二次更新： 我了解到 QueryRef 实际上根本不是 Observable 或可迭代的，这导致我发现帖子被错误地键入为 QueryRef，而它应该是 Observable。这发生在我迁移到 Apollo 2.0 时；我只是做得不对。

Answer 1

async 管道等待查询结果。你也必须在你的 TypeScript 代码中这样做。这可能由subscribing 到this.posts.valueChanges 完成，这应该是observable。

Answer 2

除了@H.B.说，你的错误描述：

“我收到错误“键入'QueryRef>' 不是数组类型或字符串类型。”

让我相信 this.posts 是一个对象，在这种情况下你不能使用 for'of 语法。对于必须使用 for'in 的对象。

for (let key in this.posts) {
      console.log("Post name is: " + this.posts[key].name);
    }