2016-06-30 4 views
0

Я хочу добавить загрузчик для загрузки к этому компоненту, и я пытаюсь разбить код на услугу, поэтому я могу добавить метод .subscribe и stop spinner при загрузке сделано, как в этом рабочем примере:Angular2 stop load spinner после загрузки данных с помощью angularfire2

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

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

Update # 1 выстрелом в ответ

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

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

UserService

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

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

+0

Какой вопрос? – AngJobs

+0

Я добавлю ответ в ответ, так что это будет яснее, я надеюсь. –

+0

Я предполагаю, что последняя проблема в этом сценарии - это тип 'items', который не позволяет мне использовать метод' .subscribe() ', чтобы остановить счетчик. Я обновил вопрос. –

ответ

0

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

items: any;  

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

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

в вашем HTML, вы не можете использовать асинхронную трубу ...

<pre>{{ items | json }}</pre> 
+0

'this.items' не присваивается типу FirebaseListObservable . Это основная проблема, я не знаю, как пройти. –

+0

'items: FirebaseListObservable ; '<== неверно, см. правки выше –

+0

Я изменил все как и предложил, и в html я имел' * ngFor = "let item of items | async" ', witch i изменен на' * ngFor = "let item of items | json ", но теперь я получаю' EXCEPTION: не могу найти отличающийся поддерживающий объект '[..... ' –

Смежные вопросы