javascript - Angular 2 调用 Web Api 时未显示 json 结果

Question

我对 Angular 1.5.x 的调用需要将 Devices 添加到 result.data

结果.数据.设备

因此我的 Angular 1.x $http 调用是这样的:

var vm = this;
var dataService = $http;

dataService.get("http://localhost:42822/api/device")
        .then(function (result) {

vm.devices = result.data.Devices; 

我的 Angular 2 代码有点不同，我调用相同的 Web api

如果我调用 .json 文件，它就会显示

private _productUrl = 'api/devices/devices.json';

但是我不理解其中的一些代码，我不知道在哪里真正添加“设备”

private _productUrl = 'http://localhost:42822/api/device';

constructor(private _http: Http) { }

getProducts(): Observable<IDevice[]> {//Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IDevice[]>response.json())
        .do(data => console.log("All: " + JSON.stringify(data)))
        .catch(this.handleError);
}

这不是我要添加到“设备”或 html 模板中的位置吗？

Answer 1

已更新

getProducts返回可以订阅更改的 Observable 集合

.map((response: Response) => <IDevice[]>response.json())

这会在 http 请求完成后返回您的设备列表。

说getProducts被定义为 Controller 方法，您可以像这样订阅可观察集合。

getProducts().subscribe(data => this.vm.devices = data)

或者更好地将其分离为服务(例如 DataService)

// constructor
constructor (private dataService: DataService) {}

displayData(): {
    this.dataService.getProducts()
        .subscribe(data => this.vm.devices = data);
}