Question

我有以下内容：

public posts: QueryRef<PostsInterface>;

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

并在相应的HTML中：

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

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

我的问题是，我怎样才能通过查询里面的帖子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'类型中不存在属性'name'。同样，当使用如上所述的* ngFor和async管道进行迭代时，可以毫无问题地访问此属性。

第二次更新： 我了解到QueryRef实际上并不是一个Observable或者是可迭代的，这让我发现帖子被错误地输入为QueryRef，而它应该是一个Observable。这发生在我迁移到Apollo 2.0时;我只是做得不对。

Answer 1

async管道等待查询结果。您也必须在TypeScript代码中执行此操作。这可以由subscribing到this.posts.valueChanges完成，该~/.ssh/authorized_keys应为observable。

Answer 2

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

“我收到错误”类型'QueryRef＆gt;' 不是数组类型或字符串类型。“

让我相信this.posts是一个对象，在这种情况下，您无法使用 forofof 语法。对于对象，您必须使用 for'in 。

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

Angular：对象可以使用ngFor进行迭代，但不能在Typescript中进行迭代？

2 个答案: