Angular 2服务变量在模板中引用时会出现控制台错误

问题描述 投票:0回答:2

我正在尝试显示从服务检索的数据,并将其显示在我的HTML中。我的方法有效,但它在控制台中输出错误,我不知道如何解决它们。

这是我的应用程序的工作方式:

app.component.ts

// initialize the variable that will store the returned message object
messages: any;

// call the service
this.TaskService.getMessages()
  .subscribe(response => {
     // response will be an object with two key:value pairs inside
     this.messages = response;
  });

以及我如何在我的html中显示它:

<div>
   <span class="hello">{{messages.hello}}</span>
   <span class="goodbye">{{messages.goodbye}}</span>
</div>

每当我运行它时,html值都会正确显示,但我在控制台中收到以下错误:

错误TypeError:无法读取未定义的属性“hello”

错误TypeError:无法读取未定义的属性'goodbye'

我之所以发生这种情况的理论是因为在模板尝试加载它们之前服务还没有完成检索值。但是,如果是这种情况,我不知道如何解决它。

(除了创建初始化'hello'和'goodbye'的组件级变量,然后在服务完成调用时更改它们的值,但这似乎效率低下)

如何显示从我的服务检索的值,并在我的HTML中显示它们而不会出现控制台错误?

感谢您的任何帮助。

javascript angular
2个回答
1
投票

出现该错误是因为在渲染模板时,messages的值仍未定义,因为它是异步分配的。有几种方法可以解决这个问题:

1. Elvis Operator

Angular支持在绑定html模板时使用Elvis Operator

<div>
   <span class="hello">{{messages?.hello}}</span>
   <span class="goodbye">{{messages?.goodbye}}</span>
</div>

请注意,您只能在html模板中使用elvis运算符,而不能在Typescript或JavaScript中使用,因为它们尚不受支持。

2. Use *ngIf

要防止模板与任何未定义的对象进行绑定,只需删除DOM,这正是*ngIf所做的:

<div *ngIf="messages !== undefined">
   <span class="hello">{{messages.hello}}</span>
   <span class="goodbye">{{messages.goodbye}}</span>
</div>

或者只是如果你相信对象的真实性:

<div *ngIf="messages">
   <span class="hello">{{messages.hello}}</span>
   <span class="goodbye">{{messages.goodbye}}</span>
</div>

1
投票

您可以使用safe navigation operator ?.来防止messages为null的情况:

<div>
   <span class="hello">{{messages?.hello}}</span>
   <span class="goodbye">{{messages?.goodbye}}</span>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.