Question

以下是我的部分组件代码

....

....
ngOnInit() 
{

this.service.getData().subscribe( function(data) {

    try 
    {
      console.log(JSON.stringify(data)); // {"name":"john"}
      this.ajaxdata = data;
}
catch(err) 
{
   console.log('Error Here....');
}

        });
}
....
....

以下是我的部分模板相关代码

{{ ajaxdata?.name }}

上面代码中的

console.log语句打印＆＃34; {＆＃34; name＆＃34;：＆＃34; john＆＃34;}＆＃34;正如所料。但{{ajaxdata？.name}}不打印＆＃34; john＆＃34; ，任何想法可能是什么原因？

Answer 1

您丢失了this上下文。

解决方案如下：

方式1：

this.service.getData().subscribe( function(data) {
    try {
        console.log(JSON.stringify(data)); // {"name":"john"}
        this.ajaxdata = data;
    }
    catch(err) {
        console.log('Error Here....');
    }

}.bind(this))

方式2：

this.service.getData().subscribe( (data) => {
        try {
            console.log(JSON.stringify(data)); // {"name":"john"}
            this.ajaxdata = data;
        }
        catch(err) {
            console.log('Error Here....');
        }

    })

它应该可以解决您的问题。

Answer 2

我认为是

{{ajaxdata.?name }}

Answer 3

看起来你已经失去了this的背景。

在您的代码中，this当前未指向您的ajaxdata类实例。有几种方法可以解决这个问题。我认为最简单的方法是使用箭头功能如下：

this.service.getData()
  .subscribe(data => this.ajaxdata = data)

有关此内容的更多信息可以是found here

角度4的模板装订

3 个答案: