Angular2 перестает загружать счетчик после загрузки данных с помощью angularfire2

Я хочу добавить счетчик загрузки к этому компоненту, и я пытаюсь разделить код на службу, поэтому я могу добавить метод .subscribe и остановить счетчик после завершения загрузки, как в этом рабочем примере. пример:

рабочий пример компонента

    ngOnInit(){
    this._userService.getUsers()
        .subscribe(users => {
            this.users = users;
            this.loadingUsers = false;

рабочий пример службы

    getUsers(){
        return this._http.get(this._url)
            .map(response => response.json());
    }

Это компонент, который я пытаюсь разделить:

    import { AngularFire, FirebaseObjectObservable , FirebaseListObservable } from 'angularfire2';
    import {UserService} from './user.service';
    import {SpinnerComponent} from './spinner.component'

    export class UsersComponent implements OnInit{
      items: FirebaseListObservable<any>;
             constructor(af: AngularFire) {
             this.items = af.database.list('/hr/users');
             //this.loadingLista = false;
            }  

Обновление №1 с ответом

Попытка выстрелить в ответ, чтобы лучше понять вопрос.

Итак, я создал UserService, который будет отображать пользователей, использующих angularfire2, теперь я думаю, что это становится главной проблемой, и под этим я подразумеваю тип items: FirebaseListObservable<any>;

Пользовательская служба

import { AngularFire } from 'angularfire2';
import {Injectable} from '@angular/core';

@Injectable()
export class UserService{

    constructor(private _af: AngularFire){}

    getUsers(){
        return this._af.database.list('hr/users');
    }
}

В UsersComponent мне удалось получить такой список пользователей:

  items: FirebaseListObservable<any>;
  ngOnInit(){
     this.items = this._userService.getUsers(); 
  }

Но теперь мне нужен способ остановить счетчик после завершения загрузки, и единственный способ, который я знаю, это .subscribe():

items: FirebaseListObservable<any>;
loadingLista = true;

constructor(private _userService: UserService) {
}

  ngOnInit(){
      this._userService.getUsers();
      .subscribe(
        x => this.items = x,
        this.loadingLista = false
      )
  }

, но это не работает из-за типа items.
Есть ли другой способ сделать это, кроме .subscribe()? Или я могу привести тип items к чему-то другому?


person Cristian Muscalu    schedule 30.06.2016    source источник
comment
В чем вопрос?   -  person null canvas    schedule 30.06.2016
comment
Я добавлю выстрел в ответ, так что я надеюсь, что это будет яснее.   -  person Cristian Muscalu    schedule 30.06.2016
comment
Я предполагаю, что последней проблемой в этом сценарии является тип items, который не позволяет мне использовать метод .subscribe() для остановки счетчика. Я обновил вопрос.   -  person Cristian Muscalu    schedule 30.06.2016


Ответы (1)


просто определите его как any

items: any;    

в блоке инициализации

  ngOnInit(){
          this._userService.getUsers()
          .subscribe(
            (x) => {this.items = x; this.loadingLista = false },
            (e) = > { console.log(error) },
          )
      }

в вашем html вы не можете использовать асинхронный канал...

<pre>{{ items | json }}</pre>
person Aaron Saunders    schedule 03.07.2016
comment
this.items нельзя присвоить типу FirebaseListObservable‹any›. Это основная проблема, которую я не знаю, как пройти. - person Cristian Muscalu; 03.07.2016
comment
items: FirebaseListObservable<any>; ‹== неверно, см. правки выше - person Aaron Saunders; 03.07.2016
comment
Я изменил все, как вы предложили, и в html у меня было *ngFor="let item of items | async ", ведь я изменил на *ngFor="let item of items | json ", но теперь я получаю EXCEPTION: Cannot find a differ supporting object '[..... - person Cristian Muscalu; 10.07.2016