Какой смысл .pipe (карта ())

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

О "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", чтобы избежать путаницы

Answer 2

Как другие говорили, this.tweets содержит только наблюдаемые, а не фактические данные, вы должны подписаться на наблюдаемые, чтобы получить фактические данные.

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

Это короткая комбинация .pipe(map(tweets => { return tweets.data})).Так что он неявно возвращает tweets.data в качестве наблюдаемого для this.tweets.