閲覧結果がブラウザに表示され、結果が表示されるまでに時間差が生じていますか？

Question

私はAngular 2とGeoFireを使用して、近くの専門家を表示しています。 GeoFireを使用してプロフェッショナルのリストを観測するサービスを作成しましたが、そのリストを取得してから表示するまでにかなりの遅延があります。

これは私のサービスの専門家を取得するための私の方法です：

import { Component } from '@angular/core'; 
import { LocationService } from '../../core/location.service'; 
import { Observable, Observer } from 'rxjs'; 

@Component({ 
    selector: 'app-test', 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.css'] 
}) 
export class TestComponent { 
    mapCenter = [34.021256, -118.403630]; 
    searchRadius = 4; 

    result; 
    error; 
    time; 

    constructor(private locationService: LocationService) { 
    const startTime = Date.now(); 
    this.locationService.getGeoQuery({ center: this.mapCenter, radius: this.searchRadius }); 

    this.locationService.getKeysFromGeoQuery() 
     .subscribe(keys => { 
     this.result = keys; 
     console.log("keys: ", this.result); 
     this.time = Date.now() - startTime; 
     console.log("time: ", this.time); 
     }); 
    } 
} 

がtest.component.html：

<p>Result: {{result}} </p> 
<p>Time: {{time}} </p> 
<p>Error: {{error}} </p> 

public getKeysFromGeoQuery(): Observable<any> { 
    var keys = new Array(); 

    return Observable.create(observer => { 
     this.geoQuery.on("key_entered", (key, location, distance) => { 
      keys.push(key);     
      observer.next(keys); 
     }); 

     this.geoQuery.on("key_exited", (key, location, distance) => { 
      var index = keys.indexOf(key); 
      if (index > -1) { 
       keys.splice(index, 1); 
      }    
      observer.next(keys); 
     }); 
    }); 
} 

これは、サービスを利用するために私のテストコンポーネントです

私のコンソールには、500ms以内に取得されたキーが表示されます。ただし、ブラウザは3〜4秒後まで結果を表示しません。誰もがこの遅延の原因を知っていますか？ Screen and console

Answer 1

GeoFire onイベントはゾーンの外に発射されているように聞こえます。

あなたはChangeDetectorRefを注入し、明示的に変化検出をトリガすることによってこれを確認できます。

import { ChangeDetectorRef } from '@angular/core'; 
... 
@Component({ 
    ... 
}) 
export class TestComponent { 
    ... 
    constructor(
    private locationService: LocationService, 
    private changeDetectorRef: ChangeDetectorRef 
) { 
    ... 
    this.locationService.getKeysFromGeoQuery() 
     .subscribe(keys => { 
     this.result = keys; 
     console.log("keys: ", this.result); 
     this.time = Date.now() - startTime; 
     console.log("time: ", this.time); 
     this.changeDetectorRef.detectChanges(); 
     }); 
    } 
} 

それはイベントがゾーンの外に発射されている場合であれば、それはどのようにFirebaseとGeoFireに関連している可能性がスクリプトはビルドに組み込まれています。おそらく彼らはzone.jsの前にロードされていますか？