无法显示来自服务器的数据

Question

enter image description here

<!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>

不久前我开始学习 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

我不能发表评论，因为我的声誉太低了，但是如果你在你的控制器中 console.log(response) 你会看到什么？

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

<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

确保你的休息 api returns 一个 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>

无法显示来自服务器的数据

Cant display data from server

javascript

node.js

express

angularjs

mean-stack