無法從服務器顯示數據

Question

 <!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（響應），你會看到什么？

如果數據完整無缺，那么您的頁面可能會在數據到達之前加載，因此顯示為空。 如果是這種情況，以下方法將起作用。

<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數組。

DEMO

 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 個解決方案

解決方案1
0 2017-01-27 16:07:05

解決方案2
0 2017-01-27 16:27:55

解決方案3
0 已采納 2017-01-27 16:29:22

無法從服務器顯示數據

問題描述

3 個解決方案

解決方案1 0 2017-01-27 16:07:05

解決方案2 0 2017-01-27 16:27:55

解決方案3 0 已采納 2017-01-27 16:29:22

解決方案1
0 2017-01-27 16:07:05

解決方案2
0 2017-01-27 16:27:55

解決方案3
0 已采納 2017-01-27 16:29:22