Question

我正在使用angular7，这是我的代码：在component.ts中

import { Component, OnInit } from "@angular/core";
import { FocusAreasService } from "../../services/focus-areas.service";

@Component({
  selector: "app-about",
  templateUrl: "./about.component.html",
  styleUrls: ["./about.component.scss"]
})
export class AboutComponent implements OnInit {
  public canonical: string;
  public RsFocusArea: any[];
  constructor(public focusareaService: FocusAreasService) {}

  ngOnInit() {
    this.canonical = document.location.origin;

    this.focusareaService.getFocusAreaDataWithHttpClient2().subscribe({
      next(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);
      },
      error(err) {
        console.error("Error: " + err);
      },
      complete() {
        console.log("Completed");
      }
    });
  }
}

}

和.html

中

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

这个生命没有重复，而是在标签结构中给了我：

<ul _ngcontent-aly-c5="" class="col-xs-12 row"><!--bindings={}--></ul>
<!--bindings={}-->
<ul _ngcontent-aly-c5="" class="col-xs-12 row"><!--bindings={}--></ul>

我的代码有什么问题吗？我以为在ngOnInit中为RsFocusArea分配新值时可能需要重新渲染页面？

Answer 1

您需要显示

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

Answer 2

RsFocusArea = [1, 2, 3];

在模板中：

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

https://angular-bchmnn.stackblitz.io

希望，它将解决您的问题。

Answer 3

问题出在订阅中

问题是，您永远不会设置您真正想要的变量，组件中的this.RsFocusArea永远不会获得值，您在订阅中调用的this.RsFocusArea变量在{{ 1}}功能。

在next(response){}中使用next(response){...}将使subscribe()关键字引用this函数，这意味着next(response){}不再引用组件的变量，但它正在寻找未定义的变量。

（在此处解释：Angular2 subscribe understand arrow function）

简而言之：this.RsFocusArea关键字在其他函数中可能很棘手

要修复它：

尝试改用箭头函数编写this：

subscribe

如果您确实想使用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"); } });表示法，则可以查看如何绑定该函数。

希望有帮助

Answer 4

哦，天哪！我正在写Jojofoulk在这里发布的答案。至少我要向您解释为什么这种情况用更少的语言出现。箭头函数保留声明它们的上下文，另一方面，函数声明保留局部作用域。

执行此操作时：

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

您正在函数本地范围中分配响应值，而外部范围不会受到影响，因此，当您打印响应值时会看到响应，但是您看到的是在本地范围中分配的本地结果。 / p>

* ngfor在Angular7中不显示任何数据

4 个答案:

问题出在订阅中

要修复它：