如何从angular2中的html文件中获取json数组的第一个对象

我有一个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"
}

  ]

我的界面如下：

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)))
 }

导出接口iWidget{

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)))
 }

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/catch”；
从“./widget”导入{IWidgets}；
从“./grid”导入{IBox}
@可注射（）
导出类WidgetService{
private _widgetUrl='./assets/widgetConfig.json'；
构造函数（私有http:http）{}
getWidgets（）：可观察{
返回此。_http.get（此。_widgetUrl）
.map（（response:response）=>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);

}

从'@angular/core'导入{Component，ViewEncapsulation}；
从“angular2 grid”导入{NgGrid，NgGridItem，NgGridConfig，NgGridItemConfig，NgGridItemEvent}；
从“./grid”导入{IBox}
从“./grid.service”导入{WidgetService}
从“./widget”导入{IWidgets}
@组成部分({
templateUrl:'./grid.component.html'，
样式URL:['./grid.component.css']，
封装：视图封装。无，
提供者：[WidgetService]
})
导出类GridComponent{
专用框：数组=[]；
私有rgb:string='#efefef'；
私人宵禁；
widgets:IWidgets[]；
错误消息：字符串；
私有gridConfig:NgGridConfig={
//这里有些财产
};
私有项位置：数组=[]；
构造函数（私有_widgetService:widgetService）{
const dashconf=this._generateDefaultDashConfig（）；
对于（var i=0；ithis.widgets=widgets，
error=>this.errorMessage=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>

{{widget.images}
{{widget.textBox}
{{widget.comments}}

但在我的例子中，我想访问另一个for内的这个Json文件的第一个对象

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

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

   </div>

//这里我想访问JSON文件的第一个对象

---

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

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

<ul>
     <li>{{widgets[0].images}}</li>
     <li>{{widgets[0].textBox}}</li>
     <li>{{widgets[0].comments}}</li>
</ul>

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

---

如果我像第一种方式那样做，我会得到以下错误：TypeError:无法读取undefined的属性“0”，这意味着你的

小部件

对象是

undefined

。你应该检查你的JSON是否正确加载。它正确加载是因为如果我用第二种方式做，它会工作，但在这种情况下，我的所有JSON文件都会加载但我希望json文件的第一个对象加载到第一个框中，json文件的第二个对象加载到第二个框中，依此类推，这就是为什么我不想使用第二种方法，因为结果不是所需的结果（加载json后），当您放入

console.log（小部件）

，控制台会显示什么？很抱歉，它在您的html中显示了一个空的arrayPut:{{“widgets:+widgets.length}}。结果是什么？@HassanFalahi它是预期的6请在plunker或JSFIDLE中共享您的代码。