Angular2 stop Ladesymbol nach dem laden von Daten mit angularfire2

Möchte ich hinzufügen, dass ein Ladesymbol auf diese Komponente, und ich bin versucht zu splitten, den code in einem service, so kann ich hinzufügen, eine .subscribe Methode und stop spinner beim laden erfolgt, wie in diesem Beispiel:

Beispiel arbeiten Komponente

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

Beispiel service

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

Dies ist die Komponente, auf die ich versuche zu splitten:

    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 mit einem Schuss auf die Antwort

Versuchen, einen Schuss auf die Antwort, um eine bessere understaning Frage.

Also habe ich den UserService, die der Benutzer mit angularfire2 ,Hexe, jetzt denke ich, ist Ausgangspunkt für das größte problem, und damit meine ich die Art von 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');
    }
}

In UsersComponent ich es geschafft die Liste von Benutzern, wie diese:

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

Aber jetzt brauche ich einen Weg, um halt der spinner nach dem laden geschieht, und der einzige Weg den ich kenne ist mit .subscribe():

items: FirebaseListObservable<any>;
loadingLista = true;

constructor(private _userService: UserService) {
}

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

aber das funktioniert nicht, weil die tipe des items.

Gibt es irgendeine andere Möglichkeit, dies zu tun, außer .subscribe()? Oder kann ich cast den Typ der items in etwas anderes?

  • Was ist die Frage?
  • Ich will hinzufügen, einen Schuss auf die Antwort, so wird es klarer sein, hoffe ich.
  • Ich denke, das Letzte problem in diesem Szenario ist die Art der items dass nicht lassen Sie mich das .subscribe() – Methode zum beenden der spinner. Ich aktualisiert die Frage.



One Reply
  1. 0

    einfach definieren, es als any

    items: any;    

    in der init-block

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

    in Ihren html, die Sie verwenden können async-Rohr…

    <pre>{{ items | json }}</pre>
    • this.items ist nicht belegbar zu geben FirebaseListObservable<alle>. Das ist das Hauptproblem ich weiß nicht, wie Sie passieren.
    • items: FirebaseListObservable<any>; <== falsch, siehe änderungen oben
    • Ich änderte alle wie u vorgeschlagen, und in html hatte ich *ngFor="let item of items | async " , Hexe ich geändert *ngFor="let item of items | json ", aber jetzt bekomme ich EXCEPTION: Cannot find a differ supporting object '[.....

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.