Angular项目页面报错Cannot read property 'aqua' of undefined，控制台日志正常

嘿，我明白你遇到的问题了！这个错误其实是异步操作导致的典型问题，咱们一步步拆解来看：

问题根源 #

你的HTTP请求是异步执行的——组件初始化时，color默认是undefined，页面会立刻开始渲染模板，这时候请求还没完成，所以{{color.aqua}}就会尝试访问一个undefined对象的属性，直接触发错误。而你在subscribe回调里的console.log，是等请求成功返回数据后才执行的，这时候color已经被赋值，自然能正常输出。

几种可行的解决办法 #

1. 使用安全导航操作符（?.）

这是Angular模板里最常用的解决方式，它会先检查color是否存在，只有当color不为undefined/null时，才会访问后面的aqua属性：

{{color?.aqua}}

2. 提前初始化color为一个空对象

在组件类里给color设置初始值，这样即使请求还没返回，color也是一个空对象，访问aqua只会得到undefined，不会触发报错：

export class Home implements OnInit { // 这里你漏写了OnInit接口哦，补上更规范
  color: any = {}; // 初始化空对象
  constructor(public http: HttpClient) {
    this.http.get('https://raw.githubusercontent.com/bahamas10/css-color-names/master/css-color-names.json')
      .subscribe( data => {
        this.color = data;
        console.log(this.color.aqua);
      });
  }
}

3. 用*ngIf控制模板渲染

通过条件判断，只有当color有值的时候才渲染对应的模板内容，从根源上避免访问未定义的属性：

<div *ngIf="color">
  {{color.aqua}}
</div>

内容的提问来源于stack exchange，提问作者Iyas