table is not updated in Angular5/6

Question

I am new in angular5/6. Have used *ngFor with static data which works fine but table to not updating when fetching data from servers This HTML table is not getting update

{{userList | json}}--this shows []
<div class="container color-light">
<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let y of userList">
    <td>{{y.id}}</td>
    <td>{{y.name}}</td>
  </tr>
</table>

but data is received in component

userList:JsonListInterface[]=[];
  ngOnInit() {
this.callingDataFromHttp();}

callingDataFromHttp(){
 this.listS.getData().subscribe(function(response){
   this.userList = response;
   console.log(this.userList);//this shows proper array with id and name
 });}

can anyone tell where i am going wrong, as frontend table is empty even after getting data.

Now explain to me, how should I know from that code what `this.listS.getData()` is doing or what should it do ? — Antoniossss, Aug 07 '18 at 17:19
100% sure that there is no issue with provided code and there is something around that breaks application. — Antoniossss, Aug 07 '18 at 17:20
Don't use annymous functions. Use arrow functions. `subscribe(response => this.userList = response)` — JB Nizet, Aug 07 '18 at 17:20
@Antoniossss: That's not relevant as long as he is getting the data in subscription — Ashish Ranjan, Aug 07 '18 at 17:20
this is console Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ] — mahipal singh, Aug 07 '18 at 17:21
@Antoniossss: beacause he has mentioned in the comment in code.. `console.log(this.userList);//this shows proper array with id and name` — Ashish Ranjan, Aug 07 '18 at 17:22
Code is **not** working fine. Read my comment, and read the duplicate I linked to. — JB Nizet, Aug 07 '18 at 17:22
@AshishRanjan I can write to you that given code works fine for me - that iwll be the same "fact" as provided. Unless given hard output such statements have no value to me. — Antoniossss, Aug 07 '18 at 17:23
As you can see, OP is loosing `this` context and claims it works fine. Too bad for him. Duplicate — Antoniossss, Aug 07 '18 at 17:24
it is working with `response => this.userList = response` thanks @JBNizet — mahipal singh, Aug 07 '18 at 17:26
@Antoniossss: I agree that it was just a fact without a proof, but somehow I didn't like the way you asked the OP for the content inside `this.listS.getData()`. Hence I commented. And as far as loosing `this` is concerned, he will not get to know the difference in a console log, `this.userList = response;` will get assigned to the `window` and log will be what he desires... but from the `window` — Ashish Ranjan, Aug 07 '18 at 17:29

score 0 · Answer 1 · answered Aug 07 '18 at 17:24

0

TS

    userList: object;
    ngOnInit() {
        this.callingDataFromHttp();
    }

    callingDataFromHttp(){
        this.listS.getData().subscribe(response =>{
            this.userList = response;
         });
    }

HTML

<div class="container color-light">
<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let user of userList">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
  </tr>
</table>

answered Aug 07 '18 at 17:24

K. Ayoub

406
1
5
15

code and binding is working good with `response => this.userList = response` no need to change to `object` – mahipal singh Aug 07 '18 at 17:28

table is not updated in Angular5/6

1 Answers1