具有新Observable和ng-template的Angular 4异步管道不起作用

Question

我正在尝试使用Angular 4异步管道和使用创建的Observable显示房间列表new Observable().

我有一个像这样定义的RoomService:

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

和一个像这样定义的RoomListComponent:

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

而我正试图展示这样的房间:

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

但它不起作用.视图继续显示正在加载...请问有人可以告诉我我的代码有什么问题吗？

Answer 1

不要在模板中调用方法,因为它将返回每个更改检测标记的新的可观察对象.

你可以试试这个:

rooms$: Observable<Room[]>;

constructor(private roomService: RoomService) {}

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

view.html

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

Plunker示例