Javascript can'；t在*ngFor中呈现数据，但它已在控制台中显示在angular 7中

我试图呈现从API获取的数据，以便在html页面中显示。但是，即使在使用

console.log（）

我已经尝试了这个主题的一些答案，但仍然没有解决我的问题：

这是我的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"});
  }
}

这是我的html代码：

<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>

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
  }
]

<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>

html:

<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>

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
  }
]

<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>

{{item.date}。{{item.title}

它很好用

---

有人能帮我解决这个问题吗？我觉得我错过了一些解决问题的方法，但我无法确定问题出在哪

在组件的顶部声明时间线

timelines = [];

然后呢,

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

---

在方法中使用

let

将使您的变量仅对该方法可用。

在您调用

timelines

变量的html中。但您从未将其声明为变量，它只在函数中已知

因此，您需要做的是将其声明为函数外部的变量：

timelines = [];

---

谢谢^。^，似乎我错过了这个问题的

let

特征，这就是为什么我不能呈现它