Question

这是我的home.component.ts文件：

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpResponse, HttpHeaders} from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private http: HttpClient) { }

  cars=[];
  fetchData=function(){
    this.http.get("http://localhost:3000/cars").subscribe(
      (res:Response)=>{
        this.cars=res.json();
      }
    )
  }

  ngOnInit() {
    this.fetchData();
  }

}

home.component.html文件：

<h1>Cars</h1>

<table>
  <th>Id</th>
  <th>Brand</th>
  <th>Model</th>
  <tr *ngFor="let car of cars">
    <td>{{car.id}}</td>
    <td>{{car.brand}}</td>
    <td>{{car.model}}</td>
  </tr>
</table>

和cars.json文件：

{
    "cars": [
      {
        "id": 1,
        "brand": "Seat",
        "model" : "Leon"
      },
      {
        "id": 2,
        "brand": "Mercedes",
        "model" : "AMG"
      }
    ]
}

我启动了json服务器并编译了项目。结果就是table structure，而没有获取的数据。 json服务器正在监听3000端口，而我正在使用angular 7.0.3版本。有人可以帮我吗？

Answer 1

尝试一下：

 const mycars = JSON.stringify(rawdata);    
 console.log(mycars);

或

{{1}}

Answer 2

  cars=[];
  fetchData=function(){
    this.http.get("http://localhost:3000/cars").subscribe(
      (res:Response)=>{
        this.cars=res;
      }
    )
  }

这解决了我的问题。谢谢您的帮助。

在Angular中显示来自json文件的数据

2 个答案: