javascript - 如何在 Angular2 View 中显示 JSON 对象

Question

Angular 的新手，我在控制台中可以使用 JSON。所以后端/REST 调用运行正常。但是，我很难理解如何在组件的 View 中显示 JSON。

控制台截图:

应用程序组件.ts

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


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

export class AppComponent {

    constructor() { }
}

贸易展.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>

我的服务是这样的:

数据.服务.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

这看起来像一个错误

  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 example