リアルタイムでリフレッシュデータを使用した角度2のアプリケーション

Question

私はangular4を使用しています。

私はリアルタイムでobservableを使って更新しようとしています。

はここで私は私がデータやフィルタを組み合わせて、これらの値はaddNeighbours配列にプッシュされlist.thenユーザーを取得した後、私はフラットのリストを取得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(); 
    } 
    } 

ファーストをインポート

まず私のコード

です。

私はgetAllNeighbours()と呼ばれ、UIに更新されるたびに使用されます。this.subscribeToData();を使用しています。

すべてがうまくいきます。私のUIは5秒ごとに更新されますが、同時にUIは5秒ごとに点滅するようになります。この問題はどのように修正できますか？

親切、

おかげで私をアドバイス。

Answer 1

問題は、getApartmentFlats（）サービスメソッドがどこかからデータを取得し、応答を取得するのに時間がかかることです。サービスがメソッドを呼び出す前にthis.addNeighbours = []を設定した場合、オブザーバブルが処理される前に配列が空でありページが点滅するため、空のテンプレートが作成されます。これを解決するには、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; 

      }); 
     }); 
    }