Angular 无法读取属性'&书信电报；物业名称>'；未定义的

我不知道我的代码出了什么问题。 控制台日志正常，但页面上出现错误

无法读取未定义的属性'aqua'

home.ts

export class Home implements {
  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); //this logs fine
    });
  }

}

home.html

{{color.aqua}} <!-- this produce error -->

{{color.aqua}
http请求是异步的，因此变量初始未定义，因此仅当变量有值时才需要显示变量，一种方法是使用以下语法：

{{color？.aqua}}


或

{{color.aqua}

请注意，第二条语句（color.aqua）是可选的，但请记住，未定义的值不会显示在模板中。http请求是异步的，因此该变量是初始未定义的，因此仅当该变量有值时才需要显示该变量，一种方法是使用以下语法：

{{color？.aqua}}


或

{{color.aqua}

注意，第二条语句（color.aqua）是可选的，但请记住，未定义的值不会显示在模板中
在您从
get
请求（异步）获得响应之前，模板将被呈现

在这种情况下，可以使用elvis运算符

{{color？.aqua}}

或者，您可以使用
*ngIf

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

{{color.aqua}


编辑
正如@ConnorsFan在评论中提到的那样。使用
而不是
将防止渲染额外的元素（
）

{{color.aqua}
在您从
get
Request（异步）获得响应之前，将呈现模板

在这种情况下，可以使用elvis运算符

{{color？.aqua}}

或者，您可以使用
*ngIf

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

{{color.aqua}


编辑
正如@ConnorsFan在评论中提到的那样。使用
而不是
将防止渲染额外的元素（
）

{{color.aqua}
{{color？.aqua}
在首次显示视图后，异步定义
color
变量。您应该使用
{{color？.aqua}}
来防止错误。请向我们显示您的JSON，因为您的属性颜色看起来未定义。@ConnorsFan请将您的注释升级为答案，以便我可以接受它作为答案。我所指的教程没有提到elvis操作符：（Jason White发布了一个您可以接受的答案。：-
{{color？.aqua}}
在首次显示视图后，异步定义
color
变量。您应该使用
{{color？.aqua}}
来防止错误。请向我们显示您的JSON，因为您的属性颜色看起来未定义。@ConnorsFan请将您的注释升级为答案，以便我可以接受它作为答案。我所指的教程没有提到elvis操作符：（Jason White发布了一个您可以接受的答案。：-）为了避免创建额外的元素，您可以使用
ng container
，而不是
span
。在有资格接受为已接受答案之前7分钟：）来避免创建额外的元素，您可以使用
ng container
而不是
span
。7分钟后才有资格接受为已接受答案：）谢谢您的解释。我只能接受一个答案。所以我也对你的答案投了赞成票。谢谢你的解释。我只能接受一个答案。所以我也对你的答案投了赞成票。
<ng-container *ngIf="color">{{ color.aqua }}</ng-container>