如何在Angular2视图中显示JSON对象

Question

New to Angular and I have the JSON available to me in the console. So the backend/REST call is functioning correctly. However I'm struggling to understand how to show the JSON in the view for the component.

Console screenshot:

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

And the HTML I'm using is:

tradeshow.component.html

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

And my service looks like this:

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

This looks like a bug

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

it should be

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

You can remove NgIf, NgFor from

  directives: [DashboardLayoutComponent, NgIf, NgFor]

these are now globally available.

Change

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

to

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

@Child() was removed a while ago

})

@View({

should be replaced by ,

I made an error in this line

tradeshows => this.tradeShows = tradeshows

should be (lowercase S)

tradeshows => this.tradeshows = tradeshows

Plunker example