angular - .pipe(map()) 有什么意义

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 中以 Angular 显示数据，我们可以采取两种方法:

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

开头

<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);

关于“ map (tweets=>twees.data)”。可观察对象可以返回任何东西。在这种情况下，返回一个像

这样的对象

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

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

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

甚至我们可以映射响应，以便可观察的返回 data.tweets

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

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