1

これにより、Hello World が正常に表示されるため、app.component.ts が正しくブートストラップされます。DataService からデータが返されないか、表示できません。コンパイル エラーはありません。JavaScript の alert() のような TypeScript のポップアップ ウィンドウで、データが 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());
    }
}
4

2 に答える 2

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;
            }); 
    }
}
于 2016-01-18T07:17:22.517 に答える