angular - Http Get Response 更新 HTML 但在控制台中给出未定义的错误

Question

当我使用HttpClient使用响应 Obj更新我的html时，它会更新值但会出现多个错误。

文件名 - auth-service.ts。

    import { any } from 'codelyzer/util/function';
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable()
    export class AuthService {

      constructor(private httpClient: HttpClient) { }
      get() {
        return this.httpClient.get<any>('/capi/v2/users/me', {
          observe: 'body',
          responseType: 'json'
        });
      }
    };

文件名 -dashboard.component.ts

    import { AuthService } from './../../services/api/auth-service';

    import { Component, Injectable, OnInit } from '@angular/core';

    @Component({
        selector: 'app-dashboard',
        templateUrl: './dashboard.component.html'
    })

    @Injectable()
    export class DashBoardComponent implements OnInit {
        user;
        constructor(private authService: AuthService) {};

        ngOnInit() {
             this.authService.get()
            .subscribe(
              (response) => {
                  this.user = response;
              }
            );
        }
    }

响应对象是

{
    "firstName": "xyz",
    "lastName": "abc",
    "active": true
}   

文件名 -dashboard.component.html

<div class="container-fluid text-center">
<h1 class="bold m-t m-b-xs">Hey there!</h1>
<h3 class="m-b">How are you doing today?</h3>

{{ user.active }}

<div class="block clear m-a">&nbsp;</div>

    <div class="row m-t p-t">
        <div class="col-xs-12"> </div>
    </div>
</div>

有关控制台中的错误的详细信息：

.

Answer 1

您的错误很可能是因为 Angular 尝试在请求完成user.active之前进行评估。get

您可以更新{{ user.active }}以包含一个?（称为安全导航运算符）：

{{ user?.active }}

Angular 安全导航运算符 (?.) 是防止属性路径中出现空值和未定义值的一种流畅且方便的方法。

您可以改为使用ngIf来避免在检索数据之前呈现您的容器。IE：

<div class="container-fluid text-center" *ngIf="user">

Answer 2

您需要使用 map 函数来返回对组件的响应。将此代码替换为您的服务获取。

get() {
  return this.httpClient.get<any>('/capi/v2/users/me')
    .map((resp) => resp)
    .catch((error) => error);
}