无法读取响应数据并将数据添加到我的网格答案

【问题标题】：could not read response data and add data to my grid无法读取响应数据并将数据添加到我的网格
【发布时间】：2017-01-25 06:45:25
【问题描述】：

我正在使用 angularjs 和 web api。我从我的 api 返回了一个列表，并尝试使用 ng-grid 在网格中显示它们。下面是我的代码。谁能帮帮我。

设计

<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<link href="~/Content/ng-grid.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ng-grid.min.js"></script>
<script src="~/Scripts/custom/cell_edit.js"></script>
</head>
<body ng-controller="MyCtrl">
    <div class="col-md-6">
        <br /><br />
        <div class="col-md-12">
            <h4>
                <em>*</em> First Name:
            </h4>
            <input type="text" class="form-control input" name="firstName" ng-model="firstName" required placeholder="Enter first name" /><br />
        </div>
        <div class="col-md-12">
            <h4><em>*</em>Last Name</h4>
            <input type="text" class="form-control input" name="lastName" ng-model="lastName" required placeholder="Enter last name"><br /><br />
        </div>
        <div class="col-md-12" align="left">               
            <button style="color:white" class="btn btn-primary" ng-click="GetData()">GetEmployees</button>
        </div>

        <div class="col-md-12" ng-grid="gridOptions" />
  </div>
 </body>
 </html>

API

 [HttpGet]
    [Route("api/ServerRequest/GetMyData")]
    public IHttpActionResult GetMyData()
    {
        var items = new[] { 
            new Employee{FirstName = "John", LastName = "Doe"},
            new Employee{FirstName = "Ann", LastName = "Wellington"},
            new Employee{FirstName = "Sabrina", LastName = "Burke"}
        };
        return Ok(items);

    }

JS 文件

 var app = angular.module('myApp', ['ngGrid']);
 app.controller('MyCtrl', function ($scope, $http) {

var Employees = [];


$scope.GetData = function () {
    $http.get('/api/ServerRequest/GetMyData')
    .success(function (response) {
        console.log(response);

        response.forEach(function (item) { Employees.push(item); });  

        console.log(Employees.length);

    })
    .error(function (response) {
        $scope.ResponseDetails = "response: " + response;

        alert("failed..");
    });
};

$scope.gridOptions = {
    data: 'Employees',
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEditOnFocus: true,
    showColumnMenu: true,
    resizable: true,
    showSelectionCheckbox: true,
    columnDefs: [{ field: 'FirstName', displayName: 'FirstName', enableCellEdit: true },
                 { field: 'LastName', displayName: 'LastName', enableCellEdit: true }]

};

});

员工类

 public class Employee
  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
  }

【问题讨论】：

标签： c# angularjs asp.net-web-api

【解决方案1】：

请更改data: Employees, 而不是data: 'Employees',

删除data参数上Employees对象上的单引号

【讨论】：

我已从 var Employees = []; 更新到 $scope.Employees = [];并在我使用Employees的地方更新了它现在工作的地方。