Question

我是Angular的新手，试图弄清楚如何读取和显示json文件的内容。

Component.ts

import { Component, OnInit } from '@angular/core';
import { RoomService } from '../shared/room.service';
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  public httpdata=[];
  constructor(private roomservice:RoomService) { 
  }

  ngOnInit() {
    this.roomservice.getJSON().subscribe(data => {
      this.httpdata.push=data;
      console.log(data);
  });
  }
}

.html

 <div>
      <ul *ngFor="let t of httpdata ">
      {{t.id |json}}
      </ul>

   </div>

我能够使用console.log获取数据，但无法显示数据。

我的JSON：

  {
  "rooms":[
    {
      "id": "1",
      "name": "abd",
      "Description": "blah blah",
      "Settings": {
        "Sources": ["ass","fff"],
        "hex": "#000"
      }
    },
    {
      "id": "2",
      "name": "abc",
      "Description": "blah",
      "Settings": {
        "Sources": ["sss,ddd"],
        "hex": "#000"
      }
    }
  ]
}

任何帮助表示赞赏！

Answer 1

您未正确推动数组，如下所示

this.httpdata.push(data);

如果那是您需要的，那应该正确地填充您的数组，尽管我认为以下是提供的代码中应发生的情况。从订阅开始。

ngOnInit() {
  this.roomservice.getJSON().subscribe(data => {
      this.httpdata = data.rooms;
      console.log(this.httpdata);
  });
}

然后在模板中

<div>
  <ul *ngFor="let rooms of httpdata ">
    <li>{{ rooms.id }}</li>
  </ul>
</div>

阅读Angular tutorial

的好地方

无法显示json内容-角度

1 个答案: