Angular 2服务变量在模板

Question

我正在尝试显示从服务检索的数据，并将其显示在我的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中而不会出现控制台错误？

感谢您的帮助。

Answer 1

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

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

Answer 2

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

1。猫王运营商

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

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

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

2。使用*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>