实时刷新数据的Angular 2应用程序

Question

我正在使用angular4。

我正在尝试使用observable进行实时更新。

这里是我的代码

首先我导入observable

import { Observable } from 'rxjs/Rx'; 
    import { AnonymousSubscription } from "rxjs/Subscription"; 
    import { ApiServiceProvider } from '../../providers/api-service/api-service'; 

    constructor(public apiService:ApiServiceProvider){} 
    ngOnInit(){ 
     this.getAllNeighbours(); 
    } 
    getAllNeighbours(){ 
    //Get Apartment User 
    this.addNeighbours=[]; 
    this.postsSubscription=this.apiService.getApartmentUser(this.currentUserApartId).subscribe(users=>{ 
     var apartmentUsers=users.json(); 
     this.subscribeToData(); 

     //Get Apartments flats 
     this.apiService.getApartmentFlats(this.currentUserApartId).subscribe(flats=>{ 
      var apartmentFlats=flats.json(); 
      for(var i in apartmentFlats){ 
       if(apartmentFlats[i].USER_ID.toString() != this.currentUserId.toString()){ 
        var filterUser=apartmentUsers.filter(u=>u.id.toString() === apartmentFlats[i].USER_ID.toString()); 
        console.log(filterUser); 
        if(filterUser.length != 0) 
         this.addNeighbours.push({ 
          username:filterUser[0].FIRST_NAME + filterUser[0].LAST_NAME, 
          flatno:apartmentFlats[i].FLAT_NO, 
          userid:apartmentFlats[i].USER_ID 
         }) 
       } 
       if(apartmentFlats[i].TENANT_ID.toString() != this.currentUserId.toString()){ 
        var filterUser=apartmentUsers.filter(u=>u.id.toString() === apartmentFlats[i].TENANT_ID.toString()); 
        if(filterUser.length != 0) 
         this.addNeighbours.push({ 
          username:filterUser[0].FIRST_NAME + filterUser[0].LAST_NAME, 
          flatno:apartmentFlats[i].FLAT_NO, 
          userid:apartmentFlats[i].USER_ID 
         }) 
       } 
      } 
      this.loading=false; 

     }) 
    }); 
    } 

    subscribeToData(){ 
    this.timerSubscription = Observable.timer(5000).subscribe(()=>{ 
     this.getAllNeighbours(); 
    }) 
    } 

    public ngOnDestroy(): void { 
    if (this.postsSubscription) { 
     this.postsSubscription.unsubscribe(); 
    } 
    if (this.timerSubscription) { 
     this.timerSubscription.unsubscribe(); 
    } 
    } 

首先，我拿到名单平底鞋后，我得到用户list.then我组合的数据和过滤器和这些值推入addNeighbours阵列。

我正在使用this.subscribeToData();。它每次都使用getAllNeighbours()并更新到UI。

一切工作正常。我的用户界面是每5秒Update.But在同一时间我的用户界面是每5秒钟就像blinking.How我可以解决这个问题。

请告诉我，

谢谢。

Answer 1

问题是getApartmentFlats（）服务方法从某处获取数据，并且需要时间来获取响应。如果在服务甚至调用方法之前设置this.addNeighbours = []，那么您将拥有一个空白模板，因为在处理observable之前数组为空，导致页面闪烁。解决方法是将this.addNeighbours = []移回到observable返回之后，但在填充新数据之前。

getAllNeighbours() { 
     //Get Apartment User 
     this.postsSubscription=this.apiService.getApartmentUser(this.currentUserApartId).subscribe(users=>{ 
      var apartmentUsers=users.json(); 
      this.subscribeToData(); 

      //Get Apartments flats 
      this.apiService.getApartmentFlats(this.currentUserApartId).subscribe(flats=>{ 
       var apartmentFlats=flats.json(); 
       this.addNeighbours = []; 

       ......   

       this.loading = false; 

      }); 
     }); 
    }