Javascript 创建一次显示或更新而不重复的可观察对象

我正在制作一个带有地理定位的Ionic应用程序，地理定位由Firebase Geofire库处理所有Havershine公式（地理定位）计算

为了使用typescript（），我修改了以下内容，基本上它合并了两个firebase表/集合（有两个以上的表/集合被合并，但为了简洁起见，没有合并），我想要的结果是将它们提供给我的主页组件，以显示附近的所有用户

我理解角度的大多数概念，但我承认我很难成功地执行可观测数据和RxJS，或者我尝试在数组中复制数据，或者，当一个值被更新时，它会在视图中复制，等等，或者它根本不起作用-我多次遇到这些场景，因此我认为如果一个专业的人能够对此有所了解，这可能会帮助很多人

我的第一个函数listusers获取当前活动用户latitude/long，并将其提供给geoFire查询，该查询在数据库上迭代，收集半径为20英里范围内的任何其他latt/long

然后将这些用户ID一次一个地提供给loadUser函数，该函数指定要连接的表等，然后执行joinPaths函数，这就是数据收集和对象合并的神奇之处

然后将数据输出到这个.show（mergedObject），这是我希望能够从模板中获取数据的地方，但我不确定如何做到这一点，我尝试了Observable.of，Observable.from等，但要么数据没有显示在我的模板中，要么像我之前提到的那样复制数据

有没有天才能想出办法让它完美地工作？从字面上说，这是一件阻碍我使用应用程序的事情

我认为，因为这会对附近的每个用户进行迭代，这可能会导致观察问题-我需要的是收集所有结果的东西，当它创建了一个可以馈送到我的主组件的数组时，我很高兴在这个阶段没有这个列表实时更新，无论如何，从用户体验的角度来看，让用户随心所欲地进行更新可能更好

//我的服务组件

    public joinPaths(id, paths, callback) {
        let returnCount = 0;
        let expectedCount = paths.length;
        let mergedObject = {};
        paths.forEach( (p) => {
            this.fb().database().ref(p).child(id).once('value',
                // success
                 (snap) => {

                    this.extendObj(mergedObject, snap.val());

                    if (++returnCount === expectedCount) {
                        this.show(mergedObject);
                    }
                },
                (error) => {
                    returnCount = expectedCount + 1; // abort counters
                    console.log( "error in joinPaths ", error );
                }
            );
        });
    }

    public loadUser(userId) {
        this.joinPaths(userId, ['users', 'geofire'], this.show);
    }

    public show(obj?): Observable<any> {
       return Observable.of( obj );
    }

    public listUsers() {    
        this.fb().database().ref(`/users/${this.userID}/lastKnownLocation`).once('value').then( (snapshot) => {     
            this.geoFire.query({ center: [snapshot.val().lat, snapshot.val().lng], radius: 20  }).on( "key_entered", (key, location, distance) => {
                this.loadUser(key);
            });
        });       
    }


    // merge the tables data into one object
    private extendObj<T1,T2>(objA: T1, objB: T2) {
        for(let key in objB){
            if(objB.hasOwnProperty(key)){
                (objA as any)[key] = (objB as any)[key];
            }
        }    
        return <T1&T2>objA;
    }

---

也许您应该异步管道，因为您直接将一个可观察的绑定到ngfor？也许您应该异步管道，因为您直接将一个可观察的绑定到ngfor？

import { Component, NgZone } from '@angular/core';
import { NavController, PopoverController } from 'ionic-angular';
import { geoApi } from '../../providers/geo';
import { Observable } from 'rxjs/Observable';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

public users$: Observable<any>;

  constructor( public _api: geoApi ) {                                       
          this._api.listUsers();
          this.users$ = this._api.show();
    }


}

    <ion-header>
        <ion-navbar>
            <ion-title>Home</ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content padding>

    <ion-grid>    
        <ion-col *ngFor="let c of users$" class="member-item" tappable width-33>                          
            <ul class="o-list-reset c--user">
                <li class="c-username o-center c-uname">{{ c?.firstName }}</li>
            </ul>
        </ion-col>     
    </ion-grid>  

    </ion-content>

    {
        // geofire table/collection data merged
        "g": "u2fkbvz3rk",
        "l": [
            51.085535799999995,
            13.457294699999998
        ],
        // users table/collection data merged
        "profile": {
            "about": {
            "avatarUrl": "assets/img/generic.png",
            "birthday": "2015-01-01",
            "blockedBy": "",
            "email": "janek@gmail.com",
            "firstName": "Janek",
            "gender": "female",
            "id": "yrdUxr1dlmOyPJ6kcD2ss55gfd4",
            "isDeleted": 0,
            "isFacebookLinked": "",
            "isVerified": 0,
            "lastKnownLocation": {
                "lat": 51.085535799999995,
                "lng": 13.457294699999998
            },        
            },
        }