typescript 类型错误：无法使用 Angular v6 读取未定义的属性“地图”

TypeError: Cannot read property 'map' of undefined with Angular v6

提问by Dustin

For some reason the response JSON is not mapping correctly Here is my html. profile-search.component.html

出于某种原因，响应 JSON 未正确映射这是我的 html。profile-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>

Here is component that the html pulls from. profile-search.component.ts

这是 html 从中提取的组件。profile-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; }

}

Service that component pulls from. profile-search.service.ts

组件从中拉取的服务。profile-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', []))
    );
  }
}

I have tried to alter

我试图改变

return this.http.get(`${searchUrl}/${packageName}`).pipe(
    map((data: any) => {
        return data.results.map(entry => ({
            name: entry.any[0],
          } as NpmPackageInfo )
        )

to login: data.login, and login: entry.login but keep getting the below error.

登录：data.login 和登录：entry.login 但不断收到以下错误。

http-error-handler.service.ts:33 TypeError: Cannot read property 'map' of undefined at MapSubscriber.project (profile-search.service.ts:49) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:75) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:81) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:85) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:136) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:20) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)

http-error-handler.service.ts:33 TypeError: 无法读取 MapSubscriber.project (profile-search.service.ts:49) at MapSubscriber.push../node_modules/rxjs/_esm5/internal 中未定义的属性“map” /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/内部/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)

回答by Corey Pyle

resultsin data.resultsis probably undefined, check that the dataobject matches the schema you're expecting it to.

results在data.results可能是undefined，检查data对象是否与您期望的模式匹配。

回答by Krishna Rathore

mapworking on arraybut this.http.get(${searchUrl}/${packageName}) return object not array.

map正在处理array但 this.http.get( ${searchUrl}/${packageName}) 返回的对象不是数组。

so data.resultsis undefined.

所以data.results是未定义的。

回答by Dustin

This is how I converted my object into an array, if anyone has a better way of doing please let me know.

这就是我将对象转换为数组的方式，如果有人有更好的方法，请告诉我。

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

} }

} }

回答by Shane Thorndike

I fixed this issue by eliminating ".results"

我通过消除“.results”解决了这个问题

from

从

.map((data: any) => this.convertData(data.results))

to

到

.map((data: any) => this.convertData(data))