Question

不知何故，我无法在组件中显示后端的数据。控制台记录response.data为我提供了我的数据。我把它放在范围内的电影变量中，但它没有绑定。这是代码：

INDEX.HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movies - AngularJS</title>

    <!-- Styles -->
    <link rel="stylesheet" href="style.css">

    <!-- Scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl" id="app">²
        <div class="box" ng-repeat="movie in movies">
            <h2 ng-class="movie.genre">{{ movie.genre }}</h2>
            <h1>{{ movie.title }}</h1>
            <p>Change the values of the movie.</p>
            <input ng-change="onChange" ng-model="movie.title" type="text">
            <input ng-change="onChange" ng-model="movie.genre" type="text">
        </div>
    </div>  
    <script src="main.js"></script>
</body>
</html>

MAIN.JS FILE

const app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    axios.get(`http://localhost:3001/api/movies`)
        .then(response => {
        $scope.movies = response.data;
        console.log($scope.movies); // logs the data correctly 
    })
    .catch(e => console.error(e.message));
});

我认为它与Async / sync＆nssss有关，但我不知道如何解决它。谢谢您的帮助！：）

Answer 1

使用有角度$http代替axios来发出请求，因为当您在回调中更新范围时，它会在内部调用视图摘要

每当您使用角度上下文之外的代码更新范围时，您需要告诉angular运行摘要

同样会删除axios作为页面中加载的不必要的依赖，因为{j}核心中已经存在$http

Answer 2

我发现您的代码没有任何问题，可能您需要使用 $scope.$apply();

手动强制渲染

$scope.movies = response.data;
$scope.$apply();

Answer 3

由于您使用axios并在其中包含角度$scope，因此摘要周期无法读取该更改

使用，角度$http代替axios

或

如果您想使用axios，则可以使用$scope.$apply并换取$scope.movies = response.data;在里面。

喜欢

$scope.$apply(function () { $scope.movies = response.data; });

Answer 4

你需要告诉angularjs更新 - 调用

$scope.evalAsync();

设置数据后

数据绑定不起作用 - AngularJS

4 个答案: