Angular 角度RxJS合并贴图类型

正在尝试使用

http.get

请求URL将经度和纬度从地理位置服务拉入

list.service

第一期：

类型“{}”上不存在业务属性“业务”

感谢您在这个问题上的帮助和时间

list.service.ts

：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { List } from '../models/list.model';
import { map } from 'rxjs/operators';
import { GeolocationService } from '../services/geolocation.service';
import { mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ListService {
    private serverApi = 'http://localhost:3000';

    constructor(private http: HttpClient, private geoServ: GeolocationService) { }

    public getAllLists(): Observable<List[]> {
        return this.geoServ.getGeoLocation().pipe(
          mergeMap<{businesses: List[]}>(({ latitude, longitude }) =>             
            this.http.get(`${this.serverApi}/yelp/${longitude}/${latitude}`).pipe(
            )
          ),
          map(res => res.businesses));
    }
}

import { Injectable } from '@angular/core';
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class GeolocationService {

  constructor() { }

  getGeoLocation() {
    return new Observable((observer) => {
      console.log('Geolocation working!');
      const options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      };
      const success = (pos) => {
        const crd = pos.coords;
        console.log(`Longitude : ${crd.longitude}`);
        const location = {
          "latitude" : crd.longitude,
          "longitude": crd.longitude
        };
        observer.next(location);
        observer.complete();
      };
      const error = (err) => {
        console.warn(`ERROR(${err.code}): ${err.message}`);
        observer.error(err);
        observer.complete();
      };
      navigator.geolocation.getCurrentPosition(success, error, options);
    });  
  }
}

export interface List {
    id: string;
    name?: string;
    rating?: number;
    review_count?: number;
    url?: string;
    location: string;
    display_name?: string;
    image_url?: string;
    is_closed?: boolean;
}

list.model.ts

：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { List } from '../models/list.model';
import { map } from 'rxjs/operators';
import { GeolocationService } from '../services/geolocation.service';
import { mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ListService {
    private serverApi = 'http://localhost:3000';

    constructor(private http: HttpClient, private geoServ: GeolocationService) { }

    public getAllLists(): Observable<List[]> {
        return this.geoServ.getGeoLocation().pipe(
          mergeMap<{businesses: List[]}>(({ latitude, longitude }) =>             
            this.http.get(`${this.serverApi}/yelp/${longitude}/${latitude}`).pipe(
            )
          ),
          map(res => res.businesses));
    }
}

import { Injectable } from '@angular/core';
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class GeolocationService {

  constructor() { }

  getGeoLocation() {
    return new Observable((observer) => {
      console.log('Geolocation working!');
      const options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      };
      const success = (pos) => {
        const crd = pos.coords;
        console.log(`Longitude : ${crd.longitude}`);
        const location = {
          "latitude" : crd.longitude,
          "longitude": crd.longitude
        };
        observer.next(location);
        observer.complete();
      };
      const error = (err) => {
        console.warn(`ERROR(${err.code}): ${err.message}`);
        observer.error(err);
        observer.complete();
      };
      navigator.geolocation.getCurrentPosition(success, error, options);
    });  
  }
}

export interface List {
    id: string;
    name?: string;
    rating?: number;
    review_count?: number;
    url?: string;
    location: string;
    display_name?: string;
    image_url?: string;
    is_closed?: boolean;
}

---

添加了

model.ts

以帮助澄清似乎您仍在使用旧的angular http客户端。这也不适合打字。要修复键入问题，请向

mergeMap

generic参数添加类型对象

public getAllLists(): Observable<List[]> {
  return this.geoServ.getGeoLocation().pipe(
    mergeMap<{latitude: string, longitude: string}, {businesses: List[]}>(({ latitude, longitude }) =>             
      this.http.get(`${this.serverApi}/yelp/${longitude}/${latitude}`).pipe(
        map(res => res.json()), // remove after updating to new http client
      )
    ),
    map(res => res.businesses));
}

public GetAllList（）：可观察{
返回此.geoServ.getGeoLocation（）管道(
合并地图（{纬度，经度}）=>
this.http.get（`${this.serverApi}/yelp/${longitude}/${latitude}`）.pipe(
map（res=>res.json（）），//更新到新http客户端后删除
)
),
地图（res=>res.business））；
}

您的代码说GET返回一个

列表[]

，但是数组没有

业务属性，这就是它抱怨的原因。您可以使用：

  public getAllLists(): Observable<List[]> {
    return this.geoServ.getGeoLocation().pipe(
      mergeMap(({ latitude, longitude }) =>
        this.http.get<any>(`${this.serverApi}/yelp/${longitude}/${latitude}`)
      ),
      map(res => res.businesses));
  }

public GetAllList（）：可观察{
返回此.geoServ.getGeoLocation（）管道(
合并地图（{纬度，经度}）=>
this.http.get（`this.serverApi}/yelp/${longitude}/${latitude}`）
),
地图（res=>res.business））；
}

这将进行编译，但是如果响应确实是一个数组，
Observable
可能最终发出
undefined
getGeoLocation
不会返回任何内容，因此您需要在list.service.ts中返回您的Observable
This.http.get（`${This.serverApi}/yelp/${longitude}/${latitude}）
，（或者，如果您有响应类型的接口，请使用该接口而不是
any
）通过复制/粘贴上面的代码，我可以看到一些错误，但是
List[]
没有
属性（虽然一个单独的
列表
可能会出现这种情况，但考虑到这一点，它应该如何表现呢？我在下面添加了一个答案，这样应该会起作用。@jaimomencayo我很高兴你找到了解决方案，但是请-编辑问题标题，因为它太宽泛了。让它更具体地针对你的情况，以便帮助搜索引擎在res中显示你的问题。）结果正确。Thnx很抱歉，我现在更新了它和上面的代码！对于类型对象，我得到了错误：src/app/services/list.service.ts（19,11）中的错误：错误TS2558:需要2-3个类型参数，但得到了1.src/app/services/list.service.ts（23,26）：错误TS2339:类型{}上不存在属性“business”“.@jaimomencayo我已经更新了我的答案。我忘了mergeMap有两个泛型类型。最好不要使用
any
来维护类型安全