通过Angularjs从web api获取数据

15 浏览
0 Comments

通过Angularjs从web api获取数据

尊敬的专家们：

我正在尝试使用Angularjs从Web API获取数据，但是出现了错误。我已经通过Google Chrome测试了API，它能正确返回JSON数据。

第一个应用程序：

var contractT = angular.module("ContractT",[]);

第二个Angular服务：

contractT.service("crudService", function ($http)
{
    this.getContracts = function()
    {
        return $http.get("/ContractTypesAPI/api/ContractTypes/getContracts");
    }
});

第三个控制器：

contractT.controller('crudController', function ($scope, crudService)
{
    loadrecords();
    function loadrecords()
    {
        var promiseGet = crudService.getContracts(); //该服务的方法调用
        promiseGet.then(function (pl) { $scope.Contracts = pl.data; });
    }
});

第四个HTML：


    
        

            Code
            Latin Description
            Local Description
        

    
    
        

            {{c.Staff_Type_Code}}
            {{c.L_Desc}}
            {{c.A_Desc}}

错误信息为：

重复项不允许在重复器中。请使用“track by”表达式指定唯一键。重复器：c in Contracts，重复键：string：f，重复值：f

JSON数据：

"[{\"Staff_Type_Code\":1,\"L_Desc\":\"CONTINUOUS CONTRACT AND INSURED\",\"A_Desc\":\"دائـــم ومـــؤمن عليـــه\"},{\"Staff_Type_Code\":12,\"L_Desc\":\"CONTRACTING 36 HOURES\",\"A_Desc\":\"متعــــاقد 36 ساعة\"},{\"Staff_Type_Code\":13,\"L_Desc\":\"CONTRACTING 30 HOURES\",\"A_Desc\":\"متعــــاقد 30 ساعة\"},{\"Staff_Type_Code\":5,\"L_Desc\":\"ASSIGNED\",\"A_Desc\":\"إنتـــداب\"},{\"Staff_Type_Code\":14,\"L_Desc\":\"متعاقد 48ساعه\",\"A_Desc\":\"متعاقد 48ساعه\"},{\"Staff_Type_Code\":15,\"L_Desc\":\"متعاقد نصف الوقت\",\"A_Desc\":\"متعاقد نصف الوقت\"},{\"Staff_Type_Code\":16,\"L_Desc\":\"الطبيب المقيم\",\"A_Desc\":\"الطبيب المقيم\"},{\"Staff_Type_Code\":17,\"L_Desc\":\"دائم و مؤمن عليه / جامعة القاهرة\",\"A_Desc\":\"CONTINUOS CONTRACT AND INSURED - CAIRO UNV.\"},{\"Staff_Type_Code\":18,\"L_Desc\":\"CONTINUOUS CONTRACT AND INSURED WITHOUT INTENSIVE\",\"A_Desc\":\"دائم ومؤمن عليه بدون حافز\"},{\"Staff_Type_Code\":19,\"L_Desc\":\"عقود / داخلى\",\"A_Desc\":\"عقود / داخلى\"},{\"Staff_Type_Code\":20,\"L_Desc\":\"عقود /جهاز مركزى\",\"A_Desc\":\"عقود / جهاز مركزى\"}]"

该网站上的答案对我没有帮助。

该API正在从SQL数据库获取数据。

希望能得到帮助，提前感谢。

0

2 答案

0 Comments

问题原因：在使用ng-repeat时，循环对象没有一个唯一的键值，导致出现错误。

解决方法：可以使用Angular内置的"track by"选项来解决这个问题。如果联系人列表没有唯一的键值，可以使用"track by $index"来替代。

代码示例：

以上是一个使用"track by $index"解决问题的示例代码。

希望能提供帮助，如果问题仍未解决，请继续寻求帮助。

0
0 Comments

问题的原因是通过AngularJS从Web API获取数据时，返回的表格中存在重复的数据。解决方法是使用track by $index来跟踪ng-repeat指令中的每个元素的索引。

具体解决方法如下所示：


    {{c.Staff_Type_Code}}
    {{c.L_Desc}}
    {{c.A_Desc}}

通过在ng-repeat指令中添加track by $index，可以确保每个元素都有一个唯一的标识符，从而避免重复数据的问题。

然而，根据对话内容来看，使用track by $index并没有解决问题，而是导致了返回的HTML页面中出现了空的和微小的表格单元格。但是对话中没有提供更多的细节，无法确定具体原因。

对于这个问题，提问者需要提供更多的信息和细节，以便其他人能够给出更准确的解决方案。

0