如何创建函数以从 WCF Rest 获取数据然后显示到表格

Posted 2023-03-15

【中文标题】如何创建函数以从 WCF Rest 获取数据然后显示到表格

【英文标题】：How to create function to get data from WCF Rest then display to table

【发布时间】：2017-04-24 16:14:47

【问题描述】：

我已经声明函数来获取 WCF Rest 名称是service.js，url 获取 Json 数据。然后我创建另一个函数来获取数据entryCtrl.js 然后显示到 html

service.js

(function (app) 
  app.service("CRUD_AngularJs_RESTService", function ($http) 
    this.getAllEntry = function () 
      return $http.get("http://localhost:51458/ServiceRequest.svc/GetAllRequest/");
    ;
  );
)(angular.module('model'));

entryCtrl.js

(function (app) 
  'use strict';
  app.controller('entryCtrl', entryCtrl);
  entryCtrl.$inject = ['$scope'];
  function entryCtrl($scope) 
      $scope.pageClass = 'page-entry';
      $scope.GetAllRecords = function() 
          var promiseGet = CRUD_AngularJs_RESTService.getAllEntry();
          promiseGet.then(function (pl)  $scope.EntryData = pl.data ,
                function (errorPl) 
                    $log.error('Some Error in Getting Records.', errorPl);
                );
      
  
)(angular.module('model'));

查看entry.html

<table data-ng-controller="entryCtrl">
   <tbody data-ng-repeat="entry in EntryData">
     <tr>
       <td>entry.name</td>
       <td>entry.telpon</td>
       <td>entry.foobar</td>
     </tr>
   </tbody>
</table>

我没有任何错误，表中的数据没有显示任何内容。我必须尝试什么才能知道它的功能是否有效？

jush 有警告XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience。我不知道这是什么意思。

【问题讨论】：

您已经定义了function GetAllRecords() ，因此这不是$scope 对象上的函数。而不是$scope.GetAllRecords()，只做GetAllRecords()，或者在作用域对象上定义函数，比如$scope.GetAllRecords = function() //..

请举个例子。谢谢

好的，谢谢。这是工作创建功能。但不显示表格。并且没有错误。我在错什么？ @devqon

检查您的pl.data 结果并检查它是否确实是一个数组，其中包含您的模板所期望的属性name、telpon 和foobar 的对象

如何尝试结果？请举例

【参考方案1】：

函数GetAllRecords() 未设置为$scope。在调用$scope.GetAllRecords()之前需要设置$scope.GetAllRecords = GetAllRecords：

function entryCtrl($scope) 
  $scope.pageClass = 'page-entry';
  $scope.GetAllRecords = function() 
      var promiseGet = CRUD_AngularJs_RESTService.getAllEntry();
      promiseGet.then(function (pl)  $scope.EntryData = pl.data ,
            function (errorPl) 
                $log.error('Some Error in Getting Records.', errorPl);
            );
  
  $scope.GetAllRecords();

或者，您可以直接调用GetAllRecords()，因为$scope 中似乎不需要它：

function entryCtrl($scope) 
  $scope.pageClass = 'page-entry';
  (function() 
      var promiseGet = CRUD_AngularJs_RESTService.getAllEntry();
      promiseGet.then(function (pl)  $scope.EntryData = pl.data ,
            function (errorPl) 
                $log.error('Some Error in Getting Records.', errorPl);
            );
  )();

【讨论】：

你是我的这样吗？ entryCtrl.$inject = ['$scope', GetAllRecords]; function entryCtrl($scope) ..; function GetAllRecords() var promiseGet = CRUD_AngularJs_RESTService.getAllEntry(); ..