Question

我想在此组件中添加加载微调器，并且我尝试将代码拆分为服务，因此我可以在加载完成时添加.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>;的类型

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

，但由于items的条纹，这不起作用 除了.subscribe()之外还有其他办法吗？或者我可以将items的类型转换为其他内容吗？

Answer 1

将其定义为items: any;

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

在init块中

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

你的HTML中的

你不能使用异步管......

var1,var2,var3
0.942856823,0.568425866,0.325885379
1.227681099,1.335672206,0.925331054
1.952671045,1.829479996,1.512280854
2.45428731,1.990174152,1.534456808
2.987783477,2.78975186,1.725095748
3.651682331,2.966399127,1.972274564
3.768010479,3.211381506,1.993080807
4.509429614,3.642983433,2.541071547
4.81498729,3.888415006,3.218031802

使用angularfire2加载数据后，Angular2停止加载微调器

1 个答案: