Angular 中的地址搜索栏与 Observable 到 url 中的推荐
Address Search Bar in Angular with Observable to url with recommendations
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)
);
}
}
我正在为 Angular 中的地址建议构建一个自动完成搜索栏。地址建议来自 URL 中的第三方提供商。我无法从 Observable 响应中提取某个键。密钥名为 Candidates。是否可以从服务中的 Observable Response 中仅提取密钥? github repo
使用映射运算符将响应转换为其他内容。
为您的回复创建类型是个好主意。
它会让你更容易在 vs 代码中完成代码。
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);
};
}
}
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)
);
}
}
我正在为 Angular 中的地址建议构建一个自动完成搜索栏。地址建议来自 URL 中的第三方提供商。我无法从 Observable 响应中提取某个键。密钥名为 Candidates。是否可以从服务中的 Observable Response 中仅提取密钥? github repo
使用映射运算符将响应转换为其他内容。
为您的回复创建类型是个好主意。 它会让你更容易在 vs 代码中完成代码。
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);
};
}
}