Question

我不知道我的代码有什么问题。控制台日志很好，但页面上有错误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 -->

Answer 1

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

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

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

Answer 2

在您收到GET请求（异步）

的响应之前呈现模板

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

{{ color?.aqua }}

或者，您可以使用*ngIf

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

修改

正如@ConnorsFan在评论中提到的那样。使用<ng-container>代替<span>会阻止呈现额外元素（<span>）。

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

无法阅读财产＆＃39; <property name =“”>＆＃39;未定义的

2 个答案:

修改