How to subscribe to an Observable in Angular

Question

I'm trying to subscribe to an Observable so I can display it in HTML with Angular, doing console.log(player) works fine however I get

Type 'Player' is missing the following properties from type 'Observable<Player>': _isScalar, source, operator, lift, and 6 more.ts(2740)

I've tried using .pipe(),

HTML:

<div *ngIf="(player$ | async) as player">
  <div *ngIf="player.characterUid">
    {{player.characterName}}
  </div>
</div>

Component:

player$: Observable<Player>;
subPlayer: Subscription;

selectPlayer(matEvent: MatAutocompleteSelectedEvent): void {
    this.inputFriends = matEvent.option.value;
    this.selectedPlayer = matEvent.option.value;
    this.inputP = false;

    this.subPlayer = this.playerProvider.get$(matEvent.option.value.userUid).subscribe(
      (player: Player) => {
        this.player$ = player; // Type 'Player' is missing the following properties from type 'Observable<Player>': _isScalar, source, operator, lift, and 6 more.ts(2740)
      }
    );
  }

Provider:

get$(uid: string): Observable<Player> {
    return this._getDoc(uid)
      .valueChanges()
      .pipe(
        map((sPlayer: ServerPlayer) => sPlayer ? new Player(sPlayer) : null)
      );
  }

  private _getDoc(uid: string): AngularFirestoreDocument {
    return this.afs.doc(`players/${uid}`);
  }

I'm just trying to assign player$ so I can display it in the HTML

Muhammed Albarmavi · Accepted Answer · 2019-08-07 14:59:43Z

you don't need to subscribe , async pipe will subscribe and get the value for you 🧙‍♂️

player$: Observable<Player>;

selectPlayer(matEvent: MatAutocompleteSelectedEvent): void {
    this.inputFriends = matEvent.option.value;
    this.selectedPlayer = matEvent.option.value;
    this.inputP = false;

    this.player$= this.playerProvider.get$(matEvent.option.value.userUid);

  }

The async pipe takes care of subscribing and unwrapping the data as well as unsubscribing when the component is destroyed, so you don't need subPlayer

template

<ng-container *ngIf="(player$ | async) as player">
  <div *ngIf="player.characterUid">
    {{player.characterName}}
  </div>
</ng-container>

Async Pipe 🔥

Morphyish · Accepted Answer · 2019-08-07 14:22:03Z

In your code player$ is not an observable, it's already the result of the observable.

player: Player; // <-- here
subPlayer: Subscription;

selectPlayer(matEvent: MatAutocompleteSelectedEvent): void {
    this.inputFriends = matEvent.option.value;
    this.selectedPlayer = matEvent.option.value;
    this.inputP = false;

    this.subPlayer = this.playerProvider.get$(matEvent.option.value.userUid).subscribe(
      (player: Player) => {
        this.player = player; // <-- here
      }
    );
  }

<div *ngIf="player"> <!-- here -->
  <div *ngIf="player.characterUid">
    {{player.characterName}}
  </div>
</div>

in case we don't need to use async pipe you answer correct 👍,well done

Florian · Accepted Answer · 2019-08-07 14:27:07Z

1

I'm just trying to assign player$ so I can display it in the HTML

this.player$ = this.playerProvider.get$(matEvent.option.value.userUid);

this method returns an observable, so if you want to assign player$, you can do it that way. In your html template, you're using | async which handles subscribe/unsubscribe automagically.

answered Aug 7, 2019 at 14:27

Florian

1,44811 silver badges16 bronze badges

1 Comment

Muhammed Albarmavi Over a year ago

the async pipe approuter is more cleaner and handling the subscribe is great thing 👍

Collectives™ on Stack Overflow

How to subscribe to an Observable in Angular

3 Answers 3

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Related