Angular 4 Async pipe with new Observable and ng-template doesn't work

Question

I'm trying to display a list of rooms using Angular 4 async pipe and an Observable created with new Observable().

I have a RoomService defined like this:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { DatabaseService } from '../core/database.service';
import { Room } from './room';

@Injectable()
export class RoomService {
  private store: any;

  constructor(private db: DatabaseService) {
    this.store = this.db.store('rooms');
  }

  getRooms(query: any = {}): Observable<Room[]> {
    return new Observable(observer => {
      this.store.find(query, (error, results) => {
        if (error) {
          observer.error(error);
        } else {
          const rooms = results.map(room => {
            return new Room(room.building, room.number, room._id);
          });
          observer.next(rooms);
        }
        observer.complete();
      });
   });
  }
}

and a RoomListComponent defined like this:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { Room } from '../room';
import { RoomService } from '../room.service';

@Component({
  selector: 'app-room-list',
  templateUrl: './room-list.component.html',
  styleUrls: ['./room-list.component.scss']
})
export class RoomListComponent implements OnInit {
  rooms$: Observable<Room[]>;

  constructor(private roomService: RoomService) {}

  ngOnInit() {
    this.rooms$ = this.roomService.getRooms();
  }
}

And I'm trying to display rooms like this:

<h1>Rooms</h1>
<div *ngIf="$rooms | async as rooms; else loading">
  <div *ngFor="let room of rooms">
    {{ room.number }}
  </div>
</div>
<ng-template #loading>Loading...</ng-template>

But it's not working. The view keep showing Loading... Please can anyone tell me what's wrong with my code?

I think it can be a syntax error. It should be <div *ngIf="rooms$ | async as rooms; else loading"> on the template. — Joe
– Joe, Commented Dec 12, 2017 at 7:14
You shouldn't change your question after it has been answered. It ruins the context of the answer. — julianobrasil
– julianobrasil, Commented Sep 15, 2020 at 2:51

yurzui · Accepted Answer · 2018-01-23 05:11:39Z

9

Don't call method in template because it will be returning new observable every change detection tick.

You could try this:

rooms$: Observable<Room[]>;

constructor(private roomService: RoomService) {}

ngOnInit() {
  this.rooms$ = this.roomService.getRooms()
}

view.html

<div *ngIf="rooms$ | async as rooms; else loading">

Plunker Example

edited Jan 23, 2018 at 5:11

answered May 24, 2017 at 12:15

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Valery Melou Over a year ago

Thanks for your answer. I've changed the code as you suggested but it's still not working, the view keep showing Loading...

yurzui Over a year ago

Then i want to see a reproduction. Do you have any github repo to reproduce it?

yurzui Over a year ago

Try to set debugger front of observer.next(rooms);

Valery Melou Over a year ago

Here is the repo: github.com/valerymelou/pharaoh-bills. Checkout the branch feature/rooms

Valery Melou Over a year ago

Because you don't have any entry in your database. And even if the service returns [] array it should render the empty <ul></ul> tag. It seems like async doesn't automatically subscribe to the observer as it's supposed to.

|

Collectives™ on Stack Overflow

Angular 4 Async pipe with new Observable and ng-template doesn't work

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related