angular: 将observable数组转换成数组来使用数据

Question

我正在尝试从我的数据服务中获取数据以在 openstreetmap 上显示为精确定位。

当我使用静态数据在 1 个精确点上尝试此操作时，它起作用了，并且精确点显示出来了。现在我想使用我的数据服务获取一组停车对象并在我的地图中使用它们来创建这些精确定位点。但是我没有显示精确点，当我在我的地图组件中通过控制台记录循环中的停车时，它只显示第一个，当我在控制台中记录时，数组显示为未定义。

问题是我试图从一个数据服务调用一个方法，该数据服务 returns 一个停车对象数组的可观察对象。现在我想遍历可观察数组以获取每个单独的停车对象，我想从中提取其经度和纬度以使其显示在地图上

我是 angular 的新手，所以我认为这可能与我收到的可观察数组有关，但不知道如何将其转换为普通数组，我我试过添加 .subscribe 但没有成功

码图

  map;
  testp;
  vectorSource;
  vectorLayer;
  rasterLayer;
  features: Feature[];
  constructor(
    private _pds: ParkingDataService
  ) { }

  ngOnInit(): void {
    this.createParkPoints();
    this.vectorSource = new VectorSource({
      features: this.features
    });

    this.vectorLayer = new VectorLayer({
      source: this.vectorSource
    });
    this.initializeMap();

  }

  createParkPoints(){
    this._pds.allParkings$.forEach( (parkings: Parking[]) =>{
      parkings.forEach((parking: Parking) => {
        console.log(parking);
        let ftre: Feature = new Feature({
          geometry: new Point(fromLonLat([parseFloat(parking.longtitude), parseFloat(parking.latitude)]))
        });

        ftre.setStyle(new Style({
          image: new Icon(({
            color: '#8959A8',
            crossOrigin: 'anonymous',
            src: 'assets/park.svg',
            imgSize: [30, 30]`enter code here`
          }))
        }));

        this.features.push(ftre);
      })
    })
  }

  initializeMap(){
    this.map = new Map({
      target: 'map',
      layers: [ new TileLayer({
        source: new OSM()
      }), this.vectorLayer ],
      view: new View({
        center: fromLonLat([3.7219431, 51.054633]),
        zoom: 15,
      })
    });
  }

}

代码数据服务

export class ParkingDataService {
  private _parkings$ = new BehaviorSubject<Parking[]>([]);
  private _parkings: Parking [];

  constructor(private http: HttpClient) {
    this._parkings$
    .pipe(
      catchError(err => {
        this._parkings$.error(err);
        return throwError(err);
      })
    )
    .subscribe((parkings: Parking[]) => {
      this._parkings = parkings;
      this._parkings$.next(this._parkings);
    });
   }

  get allParkings$(): Observable<Parking[]>{
    return this.parkings$;
  }

  get parkings$(): Observable<Parking[]>{
    return this.http.get(`${environment.apiUrl}/Parking`).pipe(
      tap(console.log),
      shareReplay(1),
      catchError(this.handleError),
      map((list: any[]): Parking[] => list.map(Parking.fromJSON))
    );

  }

  get parkings(){
    this.parkings$.subscribe(parkings =>{
      this._parkings = parkings as Parking[];
    });
    console.log(this._parkings);
    return this._parkings;
  }

  getParking$(id: number): Observable<Parking>{
    return this.http
      .get(`${environment.apiUrl}/Parking/${id}`)
      .pipe(catchError(this.handleError), map(Parking.fromJSON));
  }

  handleError(err: any): Observable<never> {
    let errorMessage: string;
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else if (err instanceof HttpErrorResponse) {
      console.log(err);
      errorMessage = `'${err.status} ${err.statusText}' when accessing '${err.url}'`;
    } else {
      errorMessage = err;
    }
    return throwError(errorMessage);
  }
}

Answer 1

该服务正在 returning 一个 Parking[] 类型的可观察对象（停车数组）

因此，要获得停车位数组，我们需要仅在组件中订阅该可观察对象

在服务中我们只需要return obsrevable，然后在组件中订阅它

我们需要服务中的一个简单函数来从服务器加载所有停车位，而不需要您在服务中使用的所有吸气剂

所以我们可以在服务中使用这样的功能

在这个函数中，我们将 return observable

loadAllParkings() {
    // here we will call the HTTP Request which returns an observable
    // you can omit this <Parking[]>, this refers to the return type of this http request, you can define this type in the map operator as you did before

    return this.http.get<Parking[]>(`${environment.apiUrl}/Parking`).pipe( // we are returning the observable here, so in the component we subscribe to this observable
        // do all the rxjs operators you need here
        // tap, map, catchError, ... and so on, as you need
    );
}

现在我们有了一个类型为 Parkings 的 observable，所以在组件中，我们只需要订阅那个 observable

在组件中

createParkPoints () {
    // the function loadAllParkings in the service returns an observable, so we can do the subscription here
    this._pds.loadAllParkings().subscribe((parkings: Parking[]) => {
        // now you have the parkings array, loop over it
    });
}

angular: 将observable数组转换成数组来使用数据

angular: convert observable array to array to use data

openlayers

openstreetmap

typescript

angular

码图

代码数据服务