Angular 来自google PlacesService的角度返回结果并添加到Observable_Angular_Firebase_Observable_Google Places Api

Angular 来自google PlacesService的角度返回结果并添加到Observable

angular firebase

Angular 来自google PlacesService的角度返回结果并添加到Observable,angular,firebase,observable,google-places-api,Angular,Firebase,Observable,Google Places Api,使用下面的方法，我可以成功地使用placeId检索位置详细信息 getPlaceDetails(placeId) { this.mapsAPILoader.load().then(() => { const service = new google.maps.places.PlacesService($('#service-helper').get(0)); service.getDetails({'placeId': placeId}, (results,

使用下面的方法，我可以成功地使用placeId检索位置详细信息

getPlaceDetails(placeId) {
    this.mapsAPILoader.load().then(() => {
      const service = new google.maps.places.PlacesService($('#service-helper').get(0));
      service.getDetails({'placeId': placeId}, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          if (results) {
            console.log(results);
          }
        }
      });
    });
  }

我有另一种方法，用于从Firebase（Firestore）检索我的所有客户，我试图通过传递每个placeId来添加从getPlaceDetails收到的详细信息，但我不确定如何从getPlaceDetails获得结果，并在映射时将其添加到每个安装程序。我的目标是让getInstallers（）返回类似于return{id，…data，…results}的内容。任何帮助都将不胜感激

getInstallers(): Observable<Installer[]> {
    const installersCollection = this.afs.collection<Installer>('installers');
    return installersCollection.snapshotChanges().map(installers => {
      return installers.map(i => {
        const data = i.payload.doc.data() as Installer;
        const id = i.payload.doc.id;
        this.getPlaceDetails(data.placeId);
        return { id, ...data };
      });
    });
  }

getInstallers（）：可观察{
const installersCollection=this.afs.collection（'installers'）；
返回InstallerCollection.snapshotChanges（）.map（安装程序=>{
返回installers.map（i=>{
const data=i.payload.doc.data（）作为安装程序；
const id=i.payload.doc.id；
这个.getPlaceDetails（data.placeId）；
返回{id，…data}；
});
});
}

下面是stackblitz上的一个非常简化的版本：

嘿，这是一个有效的解决方案：

请注意，当您需要使用角度方式直接与DOM交互时，不推荐使用这一行（它使用Jquery）：

角度方式：

@ViewChild('serviceHelper') serviceHelper;

由于您正在更改paginator和sort指令的值，因此可能会出现以下错误：

expressionChangedTerithasBeenCheckedError

您应该启动

DetectChanges（）

方法，但首先导入

changeDetectorRef

：

import { ..., ChangeDetectorRef } from '@angular/core';
this.ref.detectChanges();

请记住，当您直接引用DOM中的元素时（使用

@ViewChild

decorator），在执行

ngAfterViewInit

之前，它们是不完全可靠的app.component.ts

    import {Component, ViewChild, ChangeDetectorRef } from '@angular/core';
    ...
    @ViewChild('serviceHelper') serviceHelper;
    ...

    constructor(private mapsAPILoader: MapsAPILoader, private ref: ChangeDetectorRef) {}
    ngAfterViewInit() {
    // Create 100 users
    const businesses = [
        {placeId: 'ChIJHWJmnEbxxokRxI5WpqIW9jo'},
        {placeId: 'ChIJeUdT2ikPK4cRpqJK61nKvuk'},
        {placeId: 'ChIJ24q4qLMsDogRkwzJD2maZcw'},
    ];

    const updatedBusinesses = []

    businesses.forEach(business => {
        this.getPlaceDetails(business.placeId)
            .subscribe(place => {
                console.log(place);
                updatedBusinesses.push({
                    placeId: business.placeId,
                    name: place.name,
                    rating: place.rating
                });
                // Assign the data to the data source for the table to render
                this.dataSource = new MatTableDataSource(updatedBusinesses);
                this.dataSource.paginator = this.paginator;
                this.dataSource.sort = this.sort;
                this.ref.detectChanges();
            });
    })
  }
...
getPlaceDetails(placeId): Observable<any> {
    const callback = (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          if (results) {
            return results;
          }
        }
      };

    return this.loadMapsApi().pipe(concatMap(place => {
        const service = new google.maps.places.PlacesService(this.serviceHelper.nativeElement);
        let $getDetailsAsObservable : any;

        $getDetailsAsObservable = bindCallback(service.getDetails.bind(service), callback);
        return $getDetailsAsObservable({'placeId': placeId}); 
    }));
  }

  loadMapsApi(): Observable<any> {
      const $mapsAPILoader = fromPromise(this.mapsAPILoader.load());
      return $mapsAPILoader;
  }

从'@angular/core'导入{Component，ViewChild，ChangeDetectorRef}；
...
@ViewChild（“serviceHelper”）serviceHelper；
...
构造函数（私有mapsAPILoader:mapsAPILoader，私有ref:ChangeDetectorRef）{}
ngAfterViewInit（）{
//创建100个用户
常数业务=[
{placeId:'ChIJHWJmnEbxxokRxI5WpqIW9jo'}，
{placeId:'ChIJeUdT2ikPK4cRpqJK61nKvuk'}，
{placeId:'ChIJ24q4qLMsDogRkwzJD2maZcw'}，
];
const updatedbusiness=[]
business.forEach（business=>{
this.getPlaceDetails（business.placeId）
.订阅（地点=>{
控制台日志（位置）；
UpdatedBusinesss.push({
placeId:business.placeId，
名称：place.name，
评级：place.rating
});
//将数据指定给要呈现的表的数据源
this.dataSource=新MatTableDataSource（更新的业务）；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
此.ref.detectChanges（）；
});
})
}
...
getPlaceDetails（placeId）：可观察{
常量回调=（结果、状态）=>{
if（status==google.maps.places.PlacesServiceStatus.OK）{
如果（结果）{
返回结果；
}
}
};
返回此.loadMapsApi（）.pipe（concatMap（place=>{
const service=new google.maps.places.PlacesService（this.serviceheloper.nativeElement）；
让$getDetailsAsObservable:任何；
$getDetailsAsObservable=bindCallback（service.getDetails.bind（service），callback）；
返回$getDetailsAsObservable（{'placeId'：placeId}）；
}));
}
loadMapsApi（）：可观察{
const$mapsAPILoader=fromPromise（this.mapsAPILoader.load（））；
返回$mapsAPILoader；
}

app.component.html

...
    <div id="service-helper" #serviceHelper></div>
...

。。。
...