ASP.NET 5的TypeScript中的Angular 2数据服务未显示数据

这将成功显示Hello World，以便app.component.ts正确引导。数据服务没有返回任何数据，或者无法显示。没有编译器错误。JavaScript中是否有类似alert（）的TypeScript弹出窗口，我可以快速检查数据服务是否返回数据

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

---

您需要将数据服务注册为组件的提供者之一

从'angular2/core'导入{Component}；
从“./data.service”导入{DataService}；
@组件（{
选择器：“应用程序”，
提供者：[数据服务]，
模板：`你好，世界

{{customer.firstName}

`
})
导出类AppComponent{
客户：任何[]；
构造函数（公共数据服务：数据服务）{}
恩戈尼尼特（）{
this.dataService.getCustomers（）
.订阅（（客户：任何[]）=>{
这是。顾客=顾客；
});
}
}

对于Angular 2 Beta 1，我需要添加绑定而不是提供程序，并将数据服务注入构造函数

应用程序组件.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;
            }); 
    }
}

从'angular2/core'导入{Inject，Component}；
从“./data.service”导入{DataService}；
从'angular2/HTTP'导入{HTTP_绑定}；
@组件（{
选择器：“应用程序”，
绑定：[数据服务，HTTP_绑定]，
模板：`你好，世界

{{customer.firstName}

`
})
导出类AppComponent{
私人客户：任何[]；
构造函数（@Inject（DataService）public-DataService:DataService）{
this.dataService=dataService；
}
恩戈尼尼特（）{
this.dataService.getCustomers（）
.订阅（（客户：任何[]）=>{
这是。顾客=顾客；
}); 
}
}

alert在typescript中的工作原理与在javascript中的工作原理相同。多亏了KV，我现在已经注册了DataService，但它仍然无法工作。请尝试在构造函数中注入DataService，或者用注入装饰来修饰它

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