CODEWITHSUNDEEP
javascripthtmlangulartypescript
Rakis Friski
Rakis Friski

Reputation: 571

can't render the Data in *ngFor but it already show in console in angular 7

I'm trying to render the data that I get from API to show it in my html page. But, i can't render the data to my html page even though it already show when I'm using console.log()

I already try some of this answer from this topic but it still not solve my problem:

I am getting Data in Console Using Angular but I can't render it in html

Angular - How ngFor works?

this is my body.component.ts:

import { Component, OnInit } from '@angular/core';
import { TimelineService } from 'src/app/services/timeline.service';

@Component({
  selector: 'app-body-homepage',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component..scss']
})
export class BodyComponent implements OnInit {

  constructor(public timeline: TimelineService) {   }

  ngOnInit() {
    this.getTimeline();
  }

  getTimeline(){
    this.timeline.timeline().subscribe((data)=>{
      let timelines = [];
      let i;

      for (i=0; i < data.timelines.length; i++) {
        let id = data.timelines[i]._id;
        let date = data.timelines[i].date;
        let title = data.timelines[i].title;

        timelines.push({"id": id, "date": date, "title": title})
      }
      console.log("Cek Timelines : ", timelines);
    });
  }

  scrollToElement($element): void {
    console.log($element);
    $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  }
}

this is the response data in console:

[{
    "_id": "5ce8122d7e55260d3d9dd78a",
    "title": "Kumpul Perdana",
    "body": "Kumpul Perdana MPKMB 56",
    "date": "2019-08-29T17:00:00.000Z",
    "__v": 0
  },
  {
    "_id": "5ce812b27e55260d3d9dd78b",
    "title": "Pembagian Kelompok Besar",
    "body": "Pembagian Kelompok Besar",
    "date": "2019-09-15T17:00:00.000Z",
    "__v": 0
  }
]

this is my html code:

<div class="row">
  <div class="col-12 col-md-12 col-lg-12">
    <ul>
      <li *ngFor="let item of timelines">
        {{item.date}}. {{item.title}}
      </li>
    </ul>
  </div>
</div>

but when I try to use the data normally without using API like this:

ts:

items = [{
    "_id": "5ce8122d7e55260d3d9dd78a",
    "title": "Kumpul Perdana",
    "body": "Kumpul Perdana MPKMB 56",
    "date": "2019-08-29T17:00:00.000Z",
    "__v": 0
  },
  {
    "_id": "5ce812b27e55260d3d9dd78b",
    "title": "Pembagian Kelompok Besar",
    "body": "Pembagian Kelompok Besar",
    "date": "2019-09-15T17:00:00.000Z",
    "__v": 0
  }
]

html:

<div class="row">
  <div class="col-12 col-md-12 col-lg-12">
    <ul>
      <li *ngFor="let item of items">
        {{item.date}}. {{item.title}}
      </li>
    </ul>
  </div>
</div>

it works fine

can someone help me to solve this problem? i feel i miss something to solve it but i can't figure it which the problem is

Upvotes: 2

Views: 583

Answers (2)

Bar Gans
Bar Gans

Reputation: 1663

Within the html you call timelines variable. But you have never declared it as a variable, it is only known within the function.

So, what you need to do is declare it as a variable outside the function:

timelines = [];

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

Declare the timelines at the top within the component,

timelines = [];

and then,

this.timelines.push({"id": id, "date": date, "title": title})

using let within the method will make your variable available only to that method.

Upvotes: 2

Related Questions