Question

我之前已经这样做了，但这次我无法解决这个问题。

我的问题是我的组件没有收到任何对象（这很奇怪，因为我可以打印变量）。

这是我的服务：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class InfoService {

  listCameras: any[] = [];

  constructor(private http: Http) { }

  getCameras() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:3000/info/detalleCamaras', { headers: headers })
      .map(res => {
        this.listCameras = res.json();
        console.log(this.listCameras);
        return this.listCameras;
      });
  }


}

控制台日志中的输出很好

现在，当我去/ detalleCamaras组件时：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Http, HttpModule, Response } from '@angular/http';
import { Headers } from '@angular/http';
import { InfoService } from './../../services/info.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-cameras',
  templateUrl: './detalle-cameras.component.html',
  styles: []
})
export class DetalleCamerasComponent implements OnInit {

  listCameras: any[] = [];

  constructor(private _http: Http,
    private _info: InfoService) {  }

  ngOnInit() {
    this._info.getCameras().subscribe(data => this.listCameras = data);
    console.log(this.listCameras);
  }

}

输出为空但我可以因为我的服务而将列表打印到表中。但我想要做的是从我的服务中使用JSON。

我做错了什么？

编辑：

Component.html

＆＃13;

<table class="table table-hover">
  <tbody>
    <tr *ngFor="let camera of listCameras; let i = index">
      <td scope="row">
        {{camera.camera}}
      </td>
      <td>
        {{camera.date}}
      </td>
      <td>N of Cameras</td>
      <td>
        <i class="fa fa-check icon-status-ok" aria-hidden="true"></i>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

从服务到组件使用JSON对象数组

0 个答案: