如何在Angular2視圖中顯示JSON對象

Question

Angular的新手，我在控制台中可以使用JSON。 所以后端/ REST調用正常運行。 但是我很難理解如何在組件的視圖中顯示JSON。

控制台截圖：

app.component.ts

import { Component } from 'angular2/core';
import { TradeshowComponent } from './tradeshow/tradeshow.component';


@Component({
    selector: 'app-container'
})

export class AppComponent {

    constructor() { }
}

tradeshow.component.ts

import { Component, View } from 'angular2/core';
import { CORE_DIRECTIVES, NgIf, NgFor } from 'angular2/common';
import { DataService } from '../shared/services/data.service';
import { DashboardLayoutComponent } from '../dashboard_layout/dashboard_layout.component';
import { HTTP_PROVIDERS } from 'angular2/http';


@Component({
  selector: 'tradeshow',
  providers: [DataService, HTTP_PROVIDERS]
})

@View({
  templateUrl: 'src/app/tradeshow/tradeshow.component.html',
  directives: [DashboardLayoutComponent, NgIf, NgFor]
})

export class TradeshowComponent {

    constructor(private _dataService: DataService) { this.getTradeShows() }


  getTradeShows() {
    this._dataService.getTradeShows()
        .subscribe(
            tradeshows => this.tradeShows = tradeshows
            error =>  console.error('Error: ' + err)
         );
     }
}

我正在使用的HTML是：

tradeshow.component.html

<div *ngFor="#tradeshows of tradeshows">{{ tradeshows.name }}</div>

我的服務看起來像這樣：

data.service.ts

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Config} from '../../config/config';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
 export class DataService {

    // API path
    baseUrl: string = '/api';
    authUrl: string;
    apiUrl: string;
    registerUrl: string;

    constructor(private _http: Http, private _config: Config) {
         this.apiUrl = this._config.get('apiUrl') + this.baseUrl;
         this.authUrl = this._config.get('apiUrl') + '/auth';
         this.registerUrl = this._config.get('apiUrl') + '/register';
     }

    getTradeShows() {
        return this._http.get(this.getApiUrl('/tradeshow/list'))
            .map((res: Response) => res.json())
           .catch(this.handleError);
     }
 }

Answer 1

這看起來像一個bug

  getTradeShows() {
    this._dataService.getTradeShows()
        .subscribe(
            tradeshows => this.getTradeShows() = tradeshows,
            error =>  console.error('Error: ' + err)
        );
  }

它應該是

  getTradeShows() {
    this._dataService.getTradeShows()
        .subscribe(
            tradeshows => this.tradeshows = tradeshows
            error =>  console.error('Error: ' + err)
        );
  }

你可以刪除NgIf, NgFor

  directives: [DashboardLayoutComponent, NgIf, NgFor]

這些現在全球可用。

更改

 <div *ngFor="#tradeshows of tradeshows">{{ tradeshows.name }}</div>

至

 <div *ngFor="#tradeshow of tradeshows">{{ tradeshow.name }}</div>

@Child()前一段時間被刪除了

})

@View({

應該被替換,

我在這一行犯了一個錯誤

tradeshows => this.tradeShows = tradeshows

應該是（小寫S）

tradeshows => this.tradeshows = tradeshows

Plunker的例子