Angular httpClient获取单个对象typeError _co.object undefined

Nir*_*nik 5 get httpclient typeerror ngfor angular

我使用Angular5和httpClient来请求一个rest api.我的问题是我完全得到了对象列表但我无法获得单个对象.我使用这个模块的模块我有一个服务,我打电话到api-rest:

    getUser(id: string) {
    return this.http.get<IUserComponent>('apiAddress/getbyid?id=' + id);
    }
Run Code Online (Sandbox Code Playgroud)

在组件中我称之为

    ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.getUser(this.id);
    }
    getUser(id): void {
    this.userService.getUser(id).subscribe(data => {
        this.user = data;
    });
    }
Run Code Online (Sandbox Code Playgroud)

我在我的模板中调用用户:

    <p>
      {{user.name}}
    </p>
Run Code Online (Sandbox Code Playgroud)

当我这样做时,我得不到任何显示和错误

    TypeError: _co.user is undefined
    ERROR CONTEXT Object { view: Object, nodeIndex: 12, nodeDef: Object, elDef: Object, elView: Object }
Run Code Online (Sandbox Code Playgroud)

我可以显示一些内容,但如果在服务中我说我想要一个数组,我仍然会收到错误

    getUser(id: string) {
    return this.http.get<IUserComponent[]>('apiAddress/getbyid?id=' + id);
    }
Run Code Online (Sandbox Code Playgroud)

当我打电话给我时,我说

    ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.getUser(this.id);
    }
    getUser(id): void {
    this.userService.getUser(id).subscribe(data => {
        this.user = data[0];
    });
    }
Run Code Online (Sandbox Code Playgroud)

最后,如果我打电话给服务:

    getUser(id: string) {
    return this.http.get<IUserComponent[]>('apiAddress/getbyid?id=' + id);
    }
Run Code Online (Sandbox Code Playgroud)

并称之为

    ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
    this.getUser(this.id);
    }
    getUser(id): void {
    this.userService.getUser(id).subscribe(data => {
        this.users = data;
    });
    }
Run Code Online (Sandbox Code Playgroud)

我可以使用*ngFor显示数据,不会出现任何错误.我不太明白为什么.

在Angular的英雄教程中 https://angular.io/tutorial/toh-pt6 他们写了这个服务来获取所有:

      getHeroes (): Observable<Hero[]> {
      return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
      tap(heroes => this.log(`fetched heroes`)),
      catchError(this.handleError('getHeroes', []))
      );
      }
Run Code Online (Sandbox Code Playgroud)

这一个得到一个

    getHero(id: number): Observable<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get<Hero>(url).pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
    );
    }
Run Code Online (Sandbox Code Playgroud)

管道用来做几个动作所以这里点击和cathError然后点击我不确定正确理解它用于什么文件 https://github.com/ReactiveX/rxjs/blob/5.5.2/ src/operators/tap.ts#L14 但它似乎用于调试.