Angular 的网页中没有显示任何内容，可以清楚地显示数组中的数据答案

【问题标题】：Nothing Displayed in web page with Angular clearly showing data in an arrayAngular 的网页中没有显示任何内容，可以清楚地显示数组中的数据
【发布时间】：2016-08-19 20:55:43
【问题描述】：

不知道发生了什么，但我没有在我的网页上使用带有模板的 ng-repeat 显示任何内容。

这是显示数据的图片

This pic shows my console.log output with array of objects

不知道为什么不只显示在网页上！

Devices:  Array[17] 
  0 : Object
    Aid :  "....."
    ...
  1 : Object

带功能的角控制器

(function () {
  'use strict';

  angular.module('app').controller('DeviceController', DeviceController);

        function DeviceController($http){
            var vm = this;
            var dataService = $http;
            //dataService.get("/api/Product")

            vm.devices = [];

        deviceList();

        function deviceList() {
            dataService.get("http://localhost:42822/api/device")
            .then(function (result) {
                vm.devices = result.data;
                //debugger;
                console.log(vm.devices);
            },
            function (error) {
                handleException(error);
            });
        }


        function handleException(error) {
            alert(error.data.ExceptionMessage);
        }

  }



 })();

HTML

<html>

<head> </head>

<body>
    <div ng-app="app" ng-controller="DeviceController as vm">
            <div>test</div><br>

        <table>
            <tbody>
                <tr ng-repeat="device in vm.devices">
                    <td>{{device.Aid}}</td>
                    <td>{{device.DeviceId}}</td>
                </tr>
            </tbody>
        </table>


    </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<!--<script src="~/Scripts/angular.min.js"></script>-->
<script src="./app/app.module.js"></script>
<script src="./app/device.controller.js"></script>



</html>

不知道为什么不只显示在网页上！

【问题讨论】：

标签： javascript asp.net angularjs arrays ajax

【解决方案1】：

由于您在 Devices 响应对象中有数据，因此您需要在 ajax 解析中更改您的分配，如下所示。

vm.devices = result.data.Devices;

我建议您更改服务器的响应，而不是在Devices 对象中发送Devices 集合，而是直接发送它作为响应。

或者您也可以直接在 HTML 上进行更改，但这不是一个好方法。

<tr ng-repeat="device in vm.devices.Devices">
    <td>{{device.Aid}}</td>
    <td>{{device.DeviceId}}</td>
</tr>

【讨论】：

不错！那行得通。 1. 这对我来说看起来很丑，是标准还是我应该在我的代码中改变一些东西来解决这个问题，再次感谢你
@CodingAway 如果您直接在响应中返回 Devices 集合，那就太棒了..
好的，等等，它“与 vm.devices.Devices 一起工作，但我没有更改为 result.data.Devices - 如果我确实更改为 result.data.Devices，那么我可以只是在 vm.devices 中做设备？
@CodingAway 是的，这就是为什么我在这两种方式之间有分隔符，第一种合适.. 不要选择第二种（它只是为了演示）
好的，非常感谢 - 真的很快，.. 这些数据来自 Web Api 服务调用，那么我该如何在我的端（客户端）实现这一点？ “如果您直接在响应中返回设备集合..”这是否必须在服务器端完成？谢谢