typescript 如何使用async/await从订阅返回数据

q5iwbnjs  于 2022-11-26  发布在  TypeScript
关注(0)|答案(1)|浏览(238)

我正在尝试执行subscribe下面的函数,但就在这个完成的时候。我有两个组件,一个是principal o father组件,它从后端接收信息,另一个是grandchild组件,它从祖父那里得到过滤后的数据。
服务
在服务中,有在组件之间共享数据的功能,还有一个处理数据和根据需要分割数据的功能。

sendDataToMap(dataToMap: []) {
    this.send_data.next(dataToMap);
  }

  reciveDataToMap(): Observable<any>{
    return this.send_data.asObservable();
  }

getDataToRenderOnMap(dataToMap){

    dataToMap.forEach((data) => {

      this.routesList.push(data?.mbl_vessels?.path);

      const currentPos: number[] = Object.values(data?.mbl_vessels?.currentPosition);
      this.pointsToFit.push(currentPos);

      const marker: IMarker = {
        transportType: data?.quote?.transportationMode,
        currentPosition: currentPos
      }

      this.markersToRender.push(marker);

    });

    return {
      routesList: this.routesList,
      pointsToFit: this.pointsToFit,
      markersToRender: this.markersToRender
    }

  }

父组件

在父组件中,有一个过滤具有此属性的数据并发送数组的过程。

this.elementsToMap = elementsReq.data.filter(item => item.hasOwnProperty('mbl_vessels'));
this.miniMapService.sendDataToMap(this.elementsToMap);

孙组件

接收数据,处理,并使用一个函数来获得我需要用来在Map上绘制路线和其他过程的数据。

ngAfterViewInit() {

    this.loadMap(MapStyles.COLOR_STYLE);
    this.loadMapControls();

    this.prepareDataToMap();

    //The idea is to execute the functions below once is finished the subscribe process end
    //And return the data out of subscribe

    this.setLineStyle(LinePathColor.TO_COLOR, geoData);
    this.setCustomMarkers();
    this.setMarkerForBounding(shipmentsDataPosition);

    this.cdref.detectChanges();
  }

prepareDataToMap(){
    this.miniMapService.reciveDataToMap().subscribe((data) => {
      this.dataToMap = data;
      this.dataReturned = this.miniMapService.getDataToRenderOnMap(this.dataToMap);
    });
  }

setLineStyle(colorPath: string, route?) {

    this.mapa.on('load', () => {
      this.mapa.addSource('route', {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'properties': {},
          'geometry': {
            'type': 'LineString',
            'coordinates': route
          }
        }
      });

      this.mapa.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': colorPath,
          'line-width': 2,
          "line-dasharray": [0.2, 2]
        }
      });
    });

  }

第一个控制台显示undefined,第二个显示数据,但这是因为是在subscribe里面。

在孙组件中接收到我获取的数据后,立即对其进行处理

xlpyo6sf

xlpyo6sf1#

如果你想在观察结束时执行某个操作,也许你可以尝试使用观察的完整方法
https://rxjs.dev/guide/observable
当发出完整的值时,运行Observables: Complete vs finally vs done方法

相关问题