angular: преобразовать наблюдаемый массив в массив для использования данных - PullRequest
Новая
       25

angular: преобразовать наблюдаемый массив в массив для использования данных

0 голосов
/ 06 апреля 2020

Я пытаюсь сделать так, чтобы данные из моей службы данных отображались на openstreetmap в качестве точечных точек.

Когда я пытаюсь сделать это с 1 точным указателем с использованием данных c, это работает, и точное указание отображается. Теперь я хочу использовать свой dataservice, чтобы получить массив объектов парковки и использовать их на моей карте для создания этих точек. Однако, я не показываю эти точки, и когда я консоль регистрирую парковку из l oop в моем компоненте карты, он показывает только 1-й, а массив показывает, что он не определен, когда я регистрирую его в консоли.

Проблема в том, что я пытаюсь вызвать метод из службы данных, который возвращает наблюдаемый массив парковочных объектов. Теперь я хочу, чтобы l oop прошел через наблюдаемый массив, чтобы получить каждый отдельный парковочный объект, из которого я хочу извлечь его долготу и широту, чтобы он отображался на карте

Я новичок в angular, поэтому Я думаю, что это может быть связано с тем, что массив, который я получаю, является наблюдаемым, но не знаю, как мне нужно преобразовать его в обычный массив, я попытался добавить подписку без какой-либо удачи

кодовая карта 

  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);
  }
}

1 Ответ

0 голосов
/ 07 апреля 2020

служба возвращает наблюдаемое типа Parking[] (массив парковок)

, поэтому, чтобы получить этот массив парковок, нам нужно подписаться на это наблюдаемое только в компоненте

в сервисе нам просто нужно вернуть obsrevable, а затем подписаться на него в компоненте

нам нужна простая функция в сервисе для загрузки всех парковок с сервера, без необходимости всех тех, кто получает вы используете в сервисе

, чтобы мы могли использовать некоторую функцию, подобную этой, в сервисе

, в этой функции мы будем возвращать наблюдаемое 

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
    );
}

теперь у нас есть наблюдаемая с типом array of Parkings, поэтому в компоненте нам просто нужно подписаться на наблюдаемую

в компоненте 

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
    });
}
...