В чем смысл .pipe (map ())
Я просто смотрю на этот пример 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()), не могли бы вы рассказать об этом подробнее?
Значение не будет присвоено напрямую this.tweets. Вам нужно будет записать subscribe в this.tweets, чтобы получить данные о твитах. Все, что делает .pipe(map()), - это трансформирует фактические данные, которые вы получаете от API, и возвращает его свойство data.
Ответы 2
Как говорили другие, this.tweets хранит только наблюдаемые, а не фактические данные, вы должны подписаться на наблюдаемые, чтобы получить фактические данные.
.pipe(map(tweets => tweets.data))
Это короткая рука .pipe(map(tweets => { return tweets.data})). Таким образом, он неявно возвращает tweets.data в качестве наблюдаемого в this.tweets.
В angular для отображения данных в * ng мы можем использовать два подхода:
Показать наблюдаемое с помощью async. обычно мы используем соглашение, согласно которому наблюдаемая переменная начинается с $
<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"
даже мы можем сопоставить ответ так, чтобы наблюдаемые возвращаемые данные. твиты
map(res=>res.data.tweets)
//the for must be over tweets *ngFor = "let tweet of tweets"
ПРИМЕЧАНИЕ: я изменяю ответ, используя переменную "res", чтобы избежать недоразумений.
.pipe(map(()используется для преобразования значения, испускаемого наблюдаемым, поэтому вместо того, чтобы испускать объектtweets, он испускаетtweets.data. Переменнаяthis.tweetsсодержитObservable, а не фактические данные.