невозможно отобразить содержимое JSON-Angular - PullRequest
Новая
       24

невозможно отобразить содержимое JSON-Angular

0 голосов
/ 06 декабря 2018

Я новичок в 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"
      }
    }
  ]
}

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 06 декабря 2018

вы неправильно выдвигаете массив, он будет выглядеть следующим образом: 

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>

Хорошее место для чтения Угловой учебник

...