Question

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>ContactApp</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
</head>

<body>
    <div class="container" ng-controller="AppCtrl">

        <h1>Contact app</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>E-mail</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contactlist">
                    <td>{{contact.name}}</td>
                    <td>{{contact.email}}</td>
                    <td>{{contact.number}}</td>
                </tr>
            </tbody>
        </table>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="controllers/controller.js"></script>
</body>

</html>

＆＃13;

不久前我开始学习MEAN堆栈并陷入这个问题。正如您在图片控制器上看到的那样，从服务器接收数据但不显示它。我该怎么做才能解决这个问题？谢谢你的帮助。抱歉英语不好= D

控制器代码：

var myApp = angular.module('myApp',[]);
    myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
        console.log("hi");

$http.get('/contactlist').then(function(response){
    console.log ('RECIVED');
    $scope.contactlist = response;
});
}]);[enter image description here][1]

服务器代码：

var express = require("express");
var app =express();

app.use (express.static(__dirname + "/public"));

app.get ('/contactlist',function(req,res){
    console.log ('waitnig for my lovely request');

    person1 = {
        name: 'HBN1',
        email: 'HB1@robo.com',
        number: '(111) 111-1111'
    }
    person2 = {
        name: "HBN2",
        email: "HB2@robo.com",
        number: "(222) 222-2222"
    }
    person3 = {
        name: "HBN3",
        email: "HB3@robo.com",
        number: "(333) 333-3333"
    }

    var contactlist = [person1,person2,person3];
    res.json(contactlist);
})
app.listen(3000);
console.log ('server runing on port 3000');

Answer 1

我不能发表评论，因为我的声誉太低了，但如果你在控制器中控制了.log（响应），你会怎么看？

如果数据完整无缺，那么您的页面很可能在数据到达之前加载，因此显示为空。如果是这种情况，以下情况将起作用。

<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'>  // add this ng-show

    <h1>Contact app</h1>

    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>E-mail</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contactlist">
                <td>{{contact.name}}</td>
                <td>{{contact.email}}</td>
                <td>{{contact.number}}</td>
            </tr>
        </tbody>
    </table>

</div>

控制器：

var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
    console.log("hi");

 $scope.isLoaded = false   // add this

$http.get('/contactlist').then(function(response){
    console.log ('RECIVED');
    $scope.contactlist = response.data; //make response.data as Daniel said above

    $scope.isLoaded = true;   // add this
});
}]);[enter image description here][1]

Answer 2

变化：

$http.get('/contactlist').then(function(response){
    console.log ('RECIVED');
    $scope.contactlist = response;
});

要：

$http.get('/contactlist').then(function(response){
    console.log ('RECIVED');
    $scope.contactlist = response.data; // note the .data part
});

response对象属性可在以下位置找到：https://docs.angularjs.org/api/ng/service/ $ http

Answer 3

确保你的rest api返回一个json数组。

<强>样本

var app = angular.module('todoApp', []);

app.controller("AppCtrl", ["$scope",
  function($scope) {
    $scope.contactlist  =   [{
        name: 'HBN1',
        email: 'HB1@robo.com',
        number: '(111) 111-1111'
    },
    {
        name: "HBN2",
        email: "HB2@robo.com",
        number: "(222) 222-2222"
    }
    , {
        name: "HBN3",
        email: "HB3@robo.com",
        number: "(333) 333-3333"
    }];
 
   
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
 <div class="container">

		<h1>Contact app</h1>

		<table class="table">
			<thead>
				<tr>
					<th>Name</th>
					<th>E-mail</th>
					<th>Number</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="contact in contactlist">
					<td>{{contact.name}}</td>
					<td>{{contact.email}}</td>
					<td>{{contact.number}}</td>
				</tr>
			</tbody>
		</table>

	</div>
 
</body>

</html>

无法从服务器显示数据

3 个答案: