Question

我正在尝试呈现从API获得的数据，以将其显示在html页面中。但是，即使我在使用console.log()

时已经显示了数据，我也无法将数据呈现到我的html页面

我已经从本主题尝试了一些答案，但是仍然不能解决我的问题：

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

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

这是控制台中的响应数据：

[{
    "_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 timelines">
        {{item.date}}. {{item.title}}
      </li>
    </ul>
  </div>
</div>

但是当我尝试正常使用数据而不使用这样的API时：

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>

工作正常

有人可以帮助我解决这个问题吗？我觉得我想解决一些问题，但我不知道是哪个问题

Answer 1

在组件顶部声明时间表，

timelines = [];

然后

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

在方法中使用 let 将使变量仅可用于该方法。

Answer 2

在html中，您称为timelines变量。但是您从未将其声明为变量，只有在函数中才知道它。

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

timelines = [];

无法在* ngFor中呈现数据，但已在控制台中以角度7显示

2 个答案: