无法读取未定义角度4的属性"名称"

Question

我试图在组件的模板中打印一个值.

但我得到了上述错误 Cannot read property 'name' of undefined

我已从此问题的代码中删除了额外的内容.我想访问详细信息的第一行.

组件文件

import {
  Component
} from '@angular/core';
import {
  Person
} from './person';
import {
  getPersonDetailsService
} from './person.service';

@Component({
  selector: 'my-app',
  template: `
      {{data[0].name}}
      `
})
export class AppComponent {
  data: Person[] = [];
  ngOnInit(): void {
    this.getPersonDetailsService.getData()
      .then(data => this.data = data.slice(1, 5));
  }

}

Answer 1

我认为您应该首先检查在浏览器中打印数据时是否定义了数据.

{{data[0]?.name}}

由于您的数据最初未定义,因此无法访问其名称属性.

文档

Angular安全导航操作符(？.)是一种流畅且方便的方法,可以防止属性路径中的null和undefined值.如果currentHero为null,则保护视图呈现失败.

您还可以使用&&条件检查变量是否为null

{{data[0] && data[0].name}}