Angular 2 TypeScript 中的 DataService for ASP.NET 5 不显示数据

Question

这会成功显示 Hello World，因此 app.component.ts 正在正确引导。 DataService 没有返回任何数据，或者无法显示。没有编译器错误。 TypeScript 中是否有弹出窗口 window，例如 JavaScript 中的 alert()，我可以快速检查 DataService 是否正在返回数据？

app.component.ts

import { Component } from 'angular2/core';
import { DataService } from './data.service';

@Component({ 
  selector: 'app',
  template: `<h1>Hello World</h1>
<li *ngFor="#customer of customers">
  <span>{{customer.firstName}}</span> 
</li>
`
})
export class AppComponent {
    public dataService: DataService;
    customers: any[];
    constructor() { }
    ngOnInit() {
        this.dataService.getCustomers()
            .subscribe((customers: any[]) => {
                this.customers = customers;
            });
    }
}

data.service.ts

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
    public http: Http
    constructor() { }

    getCustomers() {
        return this.http.get('customers.json')
            .map((res: Response) => res.json());
    }
}

Answer 1

您需要将 DataService 注册为组件的提供者之一。

import { Component } from 'angular2/core';
import { DataService } from './data.service';

@Component({ 
  selector: 'app',
  providers: [DataService], 
  template: `<h1>Hello World</h1>
<li *ngFor="#customer of customers">
  <span>{{customer.firstName}}</span> 
</li>
`
})
export class AppComponent {

    customers: any[];

    constructor(public dataService: DataService) { }

    ngOnInit() {
        this.dataService.getCustomers()
            .subscribe((customers: any[]) => {
                this.customers = customers;
            });
    }
}

Answer 2

在 Angular 2 Beta 1 中，我需要添加绑定而不是提供程序，并将 DataService 注入构造函数。

app.component.ts

import { Inject, Component } from 'angular2/core';
import { DataService } from './data.service';
import { HTTP_BINDINGS } from 'angular2/http';

@Component({ 
    selector: 'app',
    bindings: [DataService, HTTP_BINDINGS],
    template: `<h1>Hello World</h1>
<li *ngFor="#customer of customers">
  <span>{{customer.firstName}}</span> 
</li>
`
})
export class AppComponent {
    private customers: any[];
    constructor( @Inject(DataService) public dataService: DataService) {
        this.dataService = dataService;
    }


    ngOnInit() {
        this.dataService.getCustomers()
            .subscribe((customers: any[]) => {
                this.customers = customers;
            }); 
    }
}

Angular 2 TypeScript 中的 DataService for ASP.NET 5 不显示数据

Angular 2 DataService in TypeScript for ASP.NET 5 not displaying data

typescript

angular2-services

angular