Я просто смотрю на этот пример 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()), не могли бы вы рассказать об этом подробнее?

5
sreginogemoh 8 Окт 2018 в 09:34

2 ответа

Лучший ответ

В angular для отображения данных в * ngFor мы можем использовать два подхода:

Показать наблюдаемое с помощью 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», чтобы избежать недоразумений.

2
Eliseo 8 Окт 2018 в 08:19

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

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

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

-1
user1503592 8 Окт 2018 в 07:30