Question

我只是在看这个示例https://github.com/arjunyel/angular-apollo-example/blob/master/frontend/src/app/app.component.ts#L28

它具有以下代码：

 this.tweets = this.tweetsGQL
      .watch()
      .valueChanges.pipe(map(tweets => tweets.data));

只想知道this.tweets如何获得分配的值？与.pipe(map())有关吗？您能提供一些细节吗？

Answer 1

以角度显示* ngFor数据，我们可以采取两个方法：

使用异步显示可观察对象。通常，我们使用一个约定，即可观察变量以$

开头

<div *ngFor="let tweet of ($tweets | async)?.tweets">
  ....
</div>
//In this case we use
this.$tweets=this.tweetsGQL
      .watch()
      .valueChanges.pipe(map(res=> res.data));

显示数组

<div *ngFor="let tweet of tweets.tweets">
  ....
</div>
//In this case we must subscribe -and not equal the observable to anything
this.tweetsGQL
      .watch()
      .valueChanges.pipe(map(res=> res.data))
      .subscribe(res=>this.tweets=res);

关于“地图（tweets => twees.data）”。可观察对象可以返回任何内容。在这种情况下，返回

之类的对象

{data:tweets:[....],otherProperty:value}

我们可以映射（转换）响应，因此可观察对象仅返回“属性”数据。不是整个对象

map(res=>res.data)
//the for must be over tweets.tweets *ngFor="let tweet of tweets.tweets"

即使我们可以映射响应，以便观察到返回数据。tweets

map(res=>res.data.tweets)
//the for must be over tweets *ngFor="let tweet of tweets"

注意：我使用变量“ res”更改了响应以避免混淆

Answer 2

正如其他人所说的this.tweets仅保留可观察对象而不是实际数据，您必须订阅该可观察对象才能获取实际数据。

.pipe(map(tweets => tweets.data))

这是.pipe(map(tweets => { return tweets.data}))的简称。因此，它隐式返回tweets.data作为this.tweets的可观察值。

.pipe（map（））的意义是什么

2 个答案: