Angular 地址搜索栏的角度与可观察到的url与建议 导出类地址建议服务{ 私有地址建议URL= 'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?f=json&singleLine='; 构造函数（私有httpClient:httpClient）{} getAddressSuggestions（术语：string）：可观察的

使用map操作符将响应转换为其他内容

为你的回答创建类型是个好主意。 它将使您更容易在vs代码中完成代码

export class AddressSuggestionsService {
  private addressSuggestionsUrl =
    'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?f=json&singleLine=';

  constructor(private httpClient: HttpClient) {}

  getAddressSuggestions(term: string): Observable<any> {
    return this.httpClient
      .get(
        `${this.addressSuggestionsUrl}${term}&outfields=Match_addr,Addr_type=PointAddress`
      )
      .pipe(
        tap((data) => console.log('All: ' + JSON.stringify(data))),
        catchError(this.handleError)
      );
  }
}

接口地址建议响应{
候选项：字符串[]
}
导出类地址建议服务{
私有地址建议URL=
'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?f=json&singleLine=';
构造函数（私有httpClient:httpClient）{}
getAddressSuggestions（术语：字符串）：可观察{
返回此.httpClient
.得到(
`${this.addressSuggestionsUrl}${term}&outfields=Match\u addr，addr\u type=PointAddress`
)
.烟斗(
映射（（数据）=>data.Candidates），
catchError（this.handleError）
);
}
}

搜索地址（术语：字符串）：可观察{
让url=`${this.endpoint}${term}&maxLocations=5&location=30.270，-97.745&distance=80467.2`；
如果（！term.trim（））{
归还（[]）；
}
返回此.httpClient
.get（url）
.烟斗(
映射（（数据）=>数据['候选者]），
catchError（this.handleError（'addresses'，[]））
);
}
私有句柄错误（操作='operation'，结果？：T）{
返回（错误：任意）：可观察=>{
log（`failed:${error.message}`）；
返回（结果为T）；
};
}
}

就是这样！最终解决方案如下

interface AddressSuggestionResponse {
  Candidates: string[]
}

export class AddressSuggestionsService {
  private addressSuggestionsUrl =
    'http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?f=json&singleLine=';

  constructor(private httpClient: HttpClient) {}

  getAddressSuggestions(term: string): Observable<string[]> {
    return this.httpClient
      .get<AddressSuggestionResponse>(
        `${this.addressSuggestionsUrl}${term}&outfields=Match_addr,Addr_type=PointAddress`
      )
      .pipe(
        map((data) => data.Candidates),
        catchError(this.handleError)
      );
  }
}

  searchAddress(term: string): Observable<Address[]> {
    let url = `${this.endpoint}${term}&maxLocations=5&location=30.270,-97.745&distance=80467.2`;

    if (!term.trim()) {
      return of([]);
    }
    return this.httpClient
      .get<Address[]>(url)
      .pipe(
        map((data) => data['candidates']),
          catchError(this.handleError<Address[]>('addresses', []))
        );
  }
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.log(`failed: ${error.message}`);
      return of(result as T);
    };
  }
}