Question

我有一个流行的错误，TypeError：无法读取未定义的属性'某事'。和我的代码工作
但为什么我应该使用* ngIf或异步？为什么会发生呢？如果没有这个奇怪的解决方案，我可以解决这个问题我所描述的对不起但很抱歉我找不到答案为什么

// service
  public getEmployee(id) {
    return this._af.database.object(`/employee/${id}`)
     .map(response => response)
     .catch(error => Observable.throw(error.json()));
  }



//component
  public employee: Employee;

  ngOnInit() {
    this.route.params
      .switchMap((params: Params) => this._EmployeesService.getEmployee(params['employeeId']))
      .subscribe(employee => {
        this.employee = employee;
      });
  }


//html
<div *ngIf="employee">...</div>` // ok
<div>{{employee?.name}}</div> // also  ok

<div>{{employee.name}}</div> // error here, TypeError: Cannot read property 'name' of undefined.

Answer 1

我强烈建议你看看这个好的答案：How do I return the response from an asynchronous call?

但是对于简短的介绍：

javascript的本质是异步的。某些功能需要一些时间才能完成。例如，您请求您的firebase查询数据库并为您获取结果。这需要一些时间，具体取决于您的网络速度。假设您从其他域请求某些内容，肯定需要一些时间。

考虑到这一点，请查看您的示例

你有一个html绑定，它取决于employee对象

<div>{{employee.name}}</div>

并且您在employee

中异步请求此ngOnInit对象（需要一些时间来获取此对象）

  ngOnInit() {
    this.route.params
      .switchMap((params: Params) => this._EmployeesService.getEmployee(params['employeeId']))
      .subscribe(employee => {
        this.employee = employee; //<--- here 
      });
  }

在将employee绑定到this.employee之前，this.employee为空（undefined）。这就是为什么您使用null或安全导航操作符（undefined）执行所有*ngIf / ?检查的原因

TypeError：无法读取未定义的属性'something'。 Angular 2

1 个答案: