时间戳

首页 > 解决方案 > *ngfor 在 Angular7 中不显示任何数据

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

问题描述

我正在使用 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>

并且 li tage 没有重复，并在标签结构中给了我这个：

<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 分配新值时，我想也许我需要重新渲染页面？

标签： angularangular7ngfor

解决方案

问题出在订阅中

问题是你从来没有设置你真正想要的变量，this.RsFocusArea你的组件永远不会得到一个值，this.RsFocusArea你在订阅中调用的变量在next(response){}函数的范围内。

使用next(response){...}in your subscribe()will 导致this关键字引用next(response){}函数，这意味着this.RsFocusArea不再引用组件的变量，而是寻找未定义的变量。

（此处解释：Angular2 subscribe 了解箭头函数）

简而言之：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");
  }
});

如果你真的想使用这个next()符号，你可以看看如何绑定函数。

希望能帮助到你

推荐阅读