无法显示 json 内容-Angular

Question

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

组件.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