无法读取未定义的属性“<属性名称>”答案

【问题标题】：Cannot read property '<property name>' of undefined无法读取未定义的属性“<属性名称>”
【发布时间】：2018-04-14 03:05:42
【问题描述】：

我不知道我的代码有什么问题。控制台日志没问题，但是页面有错误Cannot read property 'aqua' of undefined。

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 }}
color 变量是在视图首次显示后异步定义的。您应该使用{{color?.aqua}} 来防止错误。
请向我们展示您的 JSON，因为您的属性颜色看起来未定义。
@ConnorsFan 请将您的评论升级为答案，以便我接受它作为答案。我指的教程没有提到猫王运算符:(
Jason White 发布了一个您可以接受的答案。 :-)

标签： angular ionic-framework

【解决方案1】：

模板在您收到GET请求（异步）的响应之前呈现

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

{{ color?.aqua }}

您也可以使用*ngIf

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

编辑

正如@ConnorsFan 在 cmets 中提到的那样。使用 <ng-container> 而不是 <span> 将阻止渲染额外元素 (<span>)。

<ng-container *ngIf="color">{{ color.aqua }}</ng-container>

【讨论】：

为避免创建额外的元素，您可以使用ng-container 而不是span。
7 分钟前有资格接受为已接受的答案 :)

【解决方案2】：

http 请求是异步的，因此变量最初是未定义的，因此只有当变量具有值时才需要显示变量，执行此操作的一种方法是使用以下语法：
{{ color?.aqua }}
或

<ng-template [ngIf]="color && color.aqua">{{color.aqua}}</ng-template>

注意，第二条语句 (color.aqua) 是可选的，但请记住，未定义的值不会显示在模板中

【讨论】：

感谢您的解释。只能接受一个答案。所以我也赞成你的回答。