带有 Angular.JS 和 Web API 的 TypeScript

Question

我正在开发一个 asp.mvc3 web api 项目。在这个项目中，我使用 TypeScript 和 Angular.js 我需要通过 Web API 从 TypeScript 访问业务层。我使用 TypeScript 在构造函数方法中调用了 Web API 代码如下。

constructor($scope, $http: any) {
    $scope.VM = this;
    $http.get("/API/PrivateAPI/Test/1").success((a) => { this.Tiles = a });
    var bb = this.Tiles;
}

但是，当尝试从业务层获取对象列表时，Tiles 数组为空。我调试了代码，发现在传递构造函数的最后一行后调用了 Web API 并返回了结果。我需要在构造函数中调用该方法并将对象列表获取到 Tiles 数组。

有人知道怎么做吗？

Answer 1

首先，我认为您应该执行以下操作（通知.data）：

$http.get("/API/PrivateAPI/Test/1").success((response) => { this.Tiles = response.data });

无论如何，$http 只支持异步 http 请求。你想要的可以通过同步 XHR 请求来完成，这被认为是糟糕的 UI 体验，因为浏览器窗口会冻结直到 XHR 请求完成，因此 $http 不支持它（configuration docs）。

你可以做的是：

1. 从响应中调用另一个函数，例如

   (response) => { this.Tiles = response.data; this.continueWithProcessing(); }
   

2. 或者，设置一个变量以在响应返回时隐藏预加载器：

   (response) => { this.Tiles = response.data; this.allDone=true; }
   

   你在哪里有一个 ng-show 类似的东西：

   <div ng-show="!VM.allDone">Loading the data....</div> 
   

或两者兼而有之:)

注意： 底层浏览器原生 XHR 对象支持异步设置，因此在 $.ajax 中是 jquery ajax 函数：http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings。然而，这是一种可怕的 UI 体验 + 如果您从角度使用它，您将负责 scope.apply。