怎樣才能從HTML文件JSON數組的第一個對象angular2

Question

我有一個JSON文件（product.json），如下它放在src /資產/：

[ 
{ 
    "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" 
} 

    ] 

我的界面如圖下面：

出口接口的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))) 
} 

個

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文件的第一個對象都擁有各自的JSON文件的屬性的對象一個html文件，但每次我做一些我得到一個未定義的值。

我知道做這件事是這樣的：

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

我需要一些幫助，因爲我在Angular2的語法在html文件中存在一些問題。

Answer 1

我不明白你要做什麼。如果您需要訪問只您的JSON的第一個元素，你可以這樣訪問：

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

如果你想有一個循環來對boxes，另一個循環上widget你可以做它是這樣的：

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