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

首先我得到用户列表后得到Flats列表。然后我将数据和过滤器组合在一起，这些值被推送到addNeighbours数组。

我正在使用this.subscribeToData();。每次调用它getAllNeighbours()并更新到用户界面。

一切都很好。我的UI每5秒更新一次。但同时我的用户界面每5秒就像闪烁一样。我如何解决这个问题。

请建议我，

感谢。

Answer 1

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

    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;

            });
        });
    }

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

1 个答案: