Question

在Angular 4.3中加入新的HttpClient模块时，从REST api获取单个记录时出现控制台错误。我没有收到ide中的任何linter错误，页面呈现和变量显示。我是否声明了错误的变量类型？

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
          My name is {{hero.name}} and my id is {{hero.id}}
  `})

export class AppComponent implements OnInit {
  hero: Hero;

  constructor(private http: HttpClient) { }

  getOne() {
    this.http.get<Hero>
      ('http://0.0.0.0:3000/api/heroes/23')
      .subscribe(data => {
        this.hero = data;
      });
  }
  ngOnInit() {
    this.getOne();
  }
}

返回：我的名字是Bombasto，我的身份证是13

控制台错误：

TypeError: undefined is not an object (evaluating '_co.hero.name')

虽然第一个键生成错误，但第二个键不生成错误（例如，hero.id没有错误）。如果我切换顺序（hero.id是第一个，所以输出是“我的id是13，我的名字是Bombasto），我得到的错误是hero.id而不是hero.name。

当页面呈现时，我可以忽略控制台错误并继续前进。我试图通过将代码剥离到最低限度来了解它是如何工作的，并且我不想开发任何编码习惯。

此外，getAll（）的相同示例无错误：

heroes: Hero[];
getAll() {
        this.http.get<Hero[]>
          ('http://0.0.0.0:3000/api/heroes')
          .subscribe(data => {
            console.log(data);
            this.heroes = data;
          });
      }

谢谢，

Answer 1

在HTTP调用返回之前，hero未定义。 Angular4有一个很好的模板测试器。如果您将{{hero.name}}更改为{{hero?.name}}，则只有在确认.name存在后，angular才会尝试访问hero。

您还希望对{{hero.id}}执行相同操作，将其更改为{{hero?.id}}

Answer 2

Elvis操作员?.将修复错误，但根据数据加载的速度，您可能会注意到，首先，文本将带有空格：My name is and my id is（您＆＃39;如果你曾经处理大量数据或从外部服务器拉出来，那么肯定会注意到这一点。另一种解决方案是使用hero隐藏整个文本块，直到*ngIf具有值：

template: `
    <span *ngIf="hero">My name is {{hero.name}} and my id is {{hero.id}}</span>
`

这也可以避免你得到的错误，因为在条件为真之前，元素的内容根本没有被加载。

Angular 4.3 HttpClient控制台错误

2 个答案: