由于某种原因,响应JSON未正确映射 这是我的HTML。 轮廓search.component.html
<h3>Enter Username</h3>
<input (keyup)="search($event.target.value)" id="name" placeholder="Search"/>
<ul>
<li *ngFor="let package of packages$ | async">
<b>{{package.name}} v.{{package.repos}}</b> -
<i>{{package.stars}}</i>`enter code here`
</li>
</ul>
这是html提取的组件。 轮廓search.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { NpmPackageInfo, PackageSearchService } from './profile-search.service';
@Component({
selector: 'app-package-search',
templateUrl: './profile-search.component.html',
providers: [ PackageSearchService ]
})
export class PackageSearchComponent implements OnInit {
withRefresh = false;
packages$: Observable<NpmPackageInfo[]>;
private searchText$ = new Subject<string>();
search(packageName: string) {
this.searchText$.next(packageName);
}
ngOnInit() {
this.packages$ = this.searchText$.pipe(
debounceTime(500),
distinctUntilChanged(),
switchMap(packageName =>
this.searchService.search(packageName, this.withRefresh))
);
}
constructor(private searchService: PackageSearchService) { }
toggleRefresh() { this.withRefresh = ! this.withRefresh; }
}
组件来自的服务。 轮廓search.service.ts
import { Injectable, Input } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
export interface NpmPackageInfo {
name: string;
}
export const searchUrl = 'https://api.github.com/users';
const httpOptions = {
headers: new HttpHeaders({
'x-refresh': 'true'
})
};
function createHttpOptions(packageName: string, refresh = false) {
// npm package name search api
// e.g., http://npmsearch.com/query?q=dom'
const params = new HttpParams({ fromObject: { q: packageName } });
const headerMap = refresh ? {'x-refresh': 'true'} : {};
const headers = new HttpHeaders(headerMap) ;
return { headers, params };
}
@Injectable()
export class PackageSearchService {
private handleError: HandleError;
constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler) {
this.handleError = httpErrorHandler.createHandleError('HeroesService');
}
search (packageName: string, refresh = false): Observable<NpmPackageInfo[]> {
// clear if no pkg name
if (!packageName.trim()) { return of([]); }
// const options = createHttpOptions(packageName, refresh);
// TODO: Add error handling
return this.http.get(`${searchUrl}/${packageName}`).pipe(
map((data: any) => {
return data.results.map(entry => ({
name: entry.any[0],
} as NpmPackageInfo )
)
}),
catchError(this.handleError('search', []))
);
}
}
我试图改变
return this.http.get(`${searchUrl}/${packageName}`).pipe(
map((data: any) => {
return data.results.map(entry => ({
name: entry.any[0],
} as NpmPackageInfo )
)
要 login:data.login和login:entry.login但是仍然收到以下错误。
http-error-handler.service.ts:33 TypeError:无法读取属性&#39; map&#39; 未定义的 在MapSubscriber.project(profile-search.service.ts:49) 在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / map.js.MapSubscriber._next (map.js:75) 在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js:93) 在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / map.js.MapSubscriber._next (map.js:81) 在MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js:93) 在FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / filter.js.FilterSubscriber._next (filter.js:85) 在FilterSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js:93) 在MergeMapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:136) 在InnerSubscriber.push ../ node_modules / rxjs / _esm5 / internal / InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:20) 在InnerSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next (Subscriber.js:93)
答案 0 :(得分:3)
results
中的{p> data.results
可能是undefined
,请检查data
对象是否与您期望的架构相匹配。
答案 1 :(得分:0)
map
正在处理array
但this.http.get(${searchUrl}/${packageName}
)返回的对象不是数组。
所以data.results
未定义。
答案 2 :(得分:0)
这是我将对象转换为数组的方式,如果有人有更好的方法,请告诉我。
return this.http.get(`${searchUrl}/${packageName}`).pipe(
map((data: any) => {
console.log(data);
var profile = Object.keys(data).map(function(key) {
return [(key) + ': ' + data[key]];
}
);
console.log(profile);
data = profile;
return data;
}),
catchError(this.handleError<Error>('search', new Error('OOPS')))
);
} }
答案 3 :(得分:0)
我通过消除“ .results”来解决了此问题
来自
.map((data: any) => this.convertData(data.results))
到
.map((data: any) => this.convertData(data))