*ngfor not display any data in Angular7

Question

I 'm using angular7 , and here is my code : in 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");
      }
    });
  }
}

}

and in .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>

and the li tage did not repeat and gave me this in tag structure:

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

Is there anything wrong with my code? I thought maybe I need to rerender the page when I assign new value to RsFocusArea in ngOnInit?

`RsFocusArea: [1, 2, 3];` should be `RsFocusArea = [1, 2, 3];` — Julian W., May 30 '19 at 03:38
thanks for your correction , I have noticed that too . but still not work when I change it to `RsFocusArea = [1, 2, 3];` — Shinji035, May 30 '19 at 03:42
You need to use like this way. RsFocusArea = [ {id:'myid, link:'mylink'}, ]; — Sanjay, May 30 '19 at 03:44
@GaneshGudghe , I delete the redundant code, the problem is it won't repeat the
ok now check it will work check this one https://stackblitz.com/edit/angular-aphc1x — Ganesh Gudghe, May 30 '19 at 03:47
Code does not have any issues, may be the classes which you are using might causing some issue. try removing those classes and @GaneshGudghe already put a sample run. — Deepender Sharma, May 30 '19 at 03:56

Pramod Kharade · Answer 1 · 2019-05-30T03:59:38.027

0

RsFocusArea = [1, 2, 3];

In Template :

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

https://angular-bchmnn.stackblitz.io

Hope, it will solve your problem.

edited May 30 '19 at 03:59

answered May 30 '19 at 03:49

Pramod Kharade

2,005
1
22
41

thank you for your solution , I tried it, works well. I have updated my question. in real scene, we fetch data from server and assign it to property. for now the hard code works well. but if I fetch data from server , it seems not work again. I printed the data in next(response) , it's not null. so maybe I should rerender the page after assign data to property? – Shinji035 May 30 '19 at 04:03
Could you please post server response ? – Pramod Kharade May 30 '19 at 04:28

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

The problem is in the subscription

The thing is that you never set the variable you actually want, the this.RsFocusArea from your component never gets a value, the this.RsFocusArea variable you call in your subscription is in the scope of the next(response){} function.

Using next(response){...} in your subscribe() will cause the this keyword to reference the next(response){} function, meaning this.RsFocusArea doesn't refer to your component's variable anymore, but it's looking for an undefined variable instead.

(Explained here: Angular2 subscribe understand arrow function)

In short: The this keyword can be tricky inside other functions

To fix it:

Try writing your subscribe with arrow functions instead:

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");
  }
});

If you really want to use the next() notation you can have a look at how to bind the function.

Hope it helps

score 0 · Answer 3 · answered May 30 '19 at 04:55

Oh god!, I was writing the answer that Jojofoulk posted here. At least I am going to explain you why this happens in less words. Arrow functions keep the context where they were declared, in the other hand, the function declarations keep a local scope.

When you do this:

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

You are assigning the reponse value in function local scope and the outer scope doesn't result affected and is for that reason when you print the value you see your response, but you are seeing a local result assigned in local scope.

*ngfor not display any data in Angular7

3 Answers3

The problem is in the subscription

To fix it: