Angular 4.3 HttpClient控制台错误

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

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，我的ID是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; 
      }); 
     }

感谢，

来源

2017-08-02 nicolas0001

尝试初始化英雄或将* ngIf =“hero”添加到您的节点。 –

这两个选项都可以清除错误。或者，我也可以'.subscribe（data => {this.hero.id = data.id; this.hero.name = data.name;}以避免错误，但是试图最小化我的代码。谢谢， – nicolas0001

* ngIf =“英雄”似乎是最干净的答案，因为它不会在HTTP调用返回之前在屏幕上刷新已初始化的变量。 – nicolas0001

在HTTP呼叫返回之前，hero未定义。 Angular4有一个很好的模板测试器。如果您将{{hero.name}}更改为{{hero?.name}}，那么一旦角色验证存在hero，角将只尝试访问.name。

您还需要做同样的{{hero.id}}，将其更改为{{hero?.id}}

来源

2017-08-02 16:02:11

您是否建议当您错误地要求某件事情发生时Angular不再崩溃和灼伤'还没有存在吗？ – wolfhoundjesse

如果你不把'？'放在那里，它会崩溃并烧坏。{{hero.name}}'会给“英雄不是对象”错误，除非你把'{ {hero？.name}}'，其实质上相当于'{{hero && hero.name}}' –

我问的唯一原因就是之前没有任何东西会呈现，根据OP的说法，Angular抱怨，但是这样做反正 – wolfhoundjesse

猫王操作?.将修复错误，但取决于如何快速的数据加载后，你可能会注意到，在第一，文本将会出现空格：My name is and my id is（如果你使用大量数据或从外部服务器上下载，你一定会注意到这一点）。另一种解决方案是隐藏文本的整个块，直到hero有一个值，使用*ngIf：

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

这也将避免你得到的错误，因为该元素的内容是不是在所有装直到条件成立。

来源

2017-08-02 22:01:07

Angular 4.3 HttpClient控制台错误

回答

相关问题