如何从angular2

Question

我有一个json文件（product.json），如下所示，位于src / assets /：

 [
{
  "images": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png",
  "textBox": "empty",
  "comments": "empty"
},
   {
  "images": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png",
  "textBox": "empty",
  "comments": "empty"
},
  {
  "images": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png",
  "textBox": "empty",
  "comments": "empty"
},
  {
  "images": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png",
  "textBox": "empty",
  "comments": "empty"
}
,
  {
  "images": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png",
  "textBox": "empty",
  "comments": "empty"
  },
    {
  "images": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png",
  "textBox": "empty",
  "comments": "empty"
}

  ]

我的界面如下：

导出界面IWidgets {

images: string;
textBox: string;
comments: string;
  }

grid.service.ts如下：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';

import { IWidgets } from './widget';
import {IBox} from './grid'



@Injectable()
export class WidgetService {

 private _widgetUrl = './assets/widgetConfig.json';

 constructor(private _http: Http) { }

getWidgets(): Observable<IWidgets[]> {

    return this._http.get(this._widgetUrl)
        .map((response: Response) => <IWidgets[]>response.json())
        .do(data => console.log("All: " + JSON.stringify(data)))
 }

grid.component.ts定义如下

 import { Component, ViewEncapsulation } from '@angular/core';
 import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';
 import {IBox} from './grid'
 import {WidgetService} from './grid.service'
 import {IWidgets} from './widget'



@Component({
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [WidgetService]

 })

 export class GridComponent {

private boxes: Array<IBox> = [];
private rgb: string = '#efefef';
private curNum;
widgets: IWidgets[];
errorMessage: string;
private gridConfig: NgGridConfig = <NgGridConfig>{
    // some properites here
};
 private itemPositions: Array<any> = [];

 constructor(private _widgetService : WidgetService) {

    const dashconf = this._generateDefaultDashConfig(); 

    for (var i = 0; i < dashconf.length; i++) { //6
        const conf = dashconf[i]; 
        conf.payload = 1 + i;
        this.boxes[i] = { id: i + 1, config: conf,name: "widget " + conf.payload + " : "};
    }
    this.curNum = dashconf.length + 1; //6


}

ngOnInit(): void {

this._widgetService.getWidgets()
    .subscribe(widgets=> this.widgets=widgets,
                error => this.errorMessage = <any> error);

}

现在，小部件包含所有具有上述Json文件属性的对象

我现在想要在html文件中访问此Json文件的第一个对象，但每次我做某事时都会得到一个未定义的值。

我知道这样做：

    <div *ngFor="let widget of widgets">
      <ul>
     <li>{{widget.images}}</li>
     <li>{{widget.textBox}}</li>
     <li>{{widget.comments}}</li>
     </ul>
  </div>

但在我的场合，我想在另一个内部访问这个Json文件的第一个对象。另一个for循环如下所示

   <div *ngFor="let box of boxes; let i = index;">

   // here I want to access the first object of the JSON file 

   </div>

我需要一些帮助，因为我在html文件中的Angular2的语法有些问题。

Answer 1

我不明白你要做什么。如果您需要访问仅 JSON的第一个元素，您可以像这样访问它：

fatal error: 'Eigen/Core' file not found
#include <Eigen/Core>
         ^
1 error generated.

如果您尝试在<ul> <li>{{widgets[0].images}}</li> <li>{{widgets[0].textBox}}</li> <li>{{widgets[0].comments}}</li> </ul> 上循环一个循环而在boxes上循环另一个循环，则可以这样做：

widget