*ngfor不以Angular7显示任何数据

我正在使用angular7，下面是我的代码： in component.ts

从“@angular/core”导入{Component，OnInit}；
从“../../services/focus-arease.service”导入{focusareservice}”；
@组成部分({
选择器：“应用程序关于”，
templateUrl:“./about.component.html”，
样式URL:[“/about.component.scss”]
})
导出类AboutComponent在NIT上实现{
公共规范：字符串；
公共区域：任何[]；
构造函数（公共focusareaService:focusareaService）{}
恩戈尼尼特（）{
this.canonical=document.location.origin；
此.focusareaService.GetFocusReadataWithHttpClient2（）.subscribe({
下一步（答复）{
log（“HttpClient处理数据”）；
console.dir（应答）；
this.rsfocusrea=响应[“focusrea”]；
//我在这里打印这个.rsfocusrea，它有值
console.log（“this.rsfocusrea”）；
console.dir（this.rsfocusrea）；
},
错误（err）{
控制台错误（“错误：+err”）；
},
完成（）{
控制台日志（“已完成”）；
}
});
}
}
}

和in.html

{{area}

li tage没有重复，给了我标签结构：

我的代码有什么问题吗？我想当我在ngOnInit中为RsFocusArea分配新值时，可能需要重新命名页面

RsFocusArea = [1, 2, 3];

在模板中：

<li *ngFor="let area of RsFocusArea" class="col-xs-12 col-sm-6 col-md-4">
     {{area}}
</li>

{{area}}

希望它能解决你的问题

在模板中：

<li *ngFor="let area of RsFocusArea" class="col-xs-12 col-sm-6 col-md-4">
     {{area}}
</li>

{{area}}

希望它能解决您的问题。

问题出在订阅中 问题是，您从未设置实际需要的变量，组件中的

this.rsfocusrea

从未获得值，您在订阅中调用的

this.rsfocusrea

变量在

next（response）{}

函数的范围内

---

在

subscribe（）

中使用

next（response）{…}

将导致

this

关键字引用

next（response）{}

函数，这意味着

this.rsfocusrea

不再引用组件的变量，而是查找未定义的变量

（此处解释：）

简而言之：

this

关键字在其他函数中可能很棘手

要解决此问题，请执行以下操作： 尝试使用箭头函数编写您的

订阅

：

this.focusareaService.getFocusAreaDataWithHttpClient2().subscribe(
  response => {
    console.log("HttpClient handle data");
    console.dir(response);

    this.RsFocusArea = response["focusArea"];
    //I print this.RsFocusArea here , it has values 
    console.log("this.RsFocusArea");
    console.dir(this.RsFocusArea);
  },
  err => {
    console.error("Error: " + err);
  },
  () => {
    console.log("Completed");
  }
});

如果您真的想使用

next（）

符号，您可以看看如何绑定函数

希望有帮助

订阅中存在问题 问题是，您从未设置实际需要的变量，组件中的

this.rsfocusrea

从未获得值，您在订阅中调用的

this.rsfocusrea

变量在

next（response）{}

函数的范围内

---

在

subscribe（）

中使用

next（response）{…}

将导致

this

关键字引用

next（response）{}

函数，这意味着

this.rsfocusrea

不再引用组件的变量，而是查找未定义的变量

（此处解释：）

简而言之：

this

关键字在其他函数中可能很棘手

要解决此问题，请执行以下操作： 尝试使用箭头函数编写您的

订阅

：

this.focusareaService.getFocusAreaDataWithHttpClient2().subscribe(
  response => {
    console.log("HttpClient handle data");
    console.dir(response);

    this.RsFocusArea = response["focusArea"];
    //I print this.RsFocusArea here , it has values 
    console.log("this.RsFocusArea");
    console.dir(this.RsFocusArea);
  },
  err => {
    console.error("Error: " + err);
  },
  () => {
    console.log("Completed");
  }
});

如果您真的想使用

next（）

符号，您可以看看如何绑定函数

---

希望它能有所帮助

哦，天哪！，我正在写Jofoulk在这里发布的答案。至少我会用更少的语言向你解释为什么会发生这种情况。箭头函数保留声明它们的上下文，另一方面，函数声明保留一个局部范围

执行此操作时：

{
    ...
    this.RsFocusArea = response["focusArea"];
}

---

您正在函数本地作用域中分配响应值，外部作用域不受影响，因此，当您打印该值时，您会看到您的响应，但您会看到在本地作用域中分配的本地结果。

哦，天哪！，我正在写Jofoulk在这里发布的答案。至少我会用更少的语言向你解释为什么会发生这种情况。箭头函数保留声明它们的上下文，另一方面，函数声明保留一个局部范围

执行此操作时：

{
    ...
    this.RsFocusArea = response["focusArea"];
}

---

您正在函数本地作用域中分配响应值，而外部作用域不受影响，因此，当您打印该值时，您会看到您的响应，但您会看到在本地作用域中分配的本地结果。

rsfocusrea:[1，2，3]应该是
rsfocusrea=[1,2,3]rsfocusrea=[1,2,3]时仍然不起作用其中是rsfocusrea中定义的.id和.link，您需要这样使用。rsfocusrea=[{id:'myid，link:'mylink'}，]@GaneshGudghe，我删除了冗余代码，问题是它不会重复
标记，即使rsfocusrea是一个硬代码数组。
rsfocusrea:[1,2,3]应该是
rsfocusrea=[1,2,3]rsfocusrea=[1,2,3]时仍然不起作用其中是rsfocusrea中定义的.id和.link，您需要这样使用。rsfocusrea=[{id:'myid，link:'mylink'}，]@Ganeshgudhe，我删除了redu