不知何故，我无法在组件中显示后端的数据。控制台日志记录响应.data为我提供了我的数据。我把它放在范围内的电影变量中，但它没有绑定。这是代码：
索引.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>
主.JS文件
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));
});
我认为这与异步/同步有关，但我不知道如何解决。感谢您的帮助！:)
使用角度$http而不是axios来发出请求，因为当您在回调中更新范围时，它会在内部调用视图摘要
任何时候你使用角度上下文之外的代码来更新范围时，你需要告诉角度运行摘要
还将删除 axios 作为在页面中加载的不必要的依赖项，因为 angularjs 核心中已经存在$http
我没有看到您的代码有任何问题，可能需要使用$scope.$apply();强制渲染
$scope.movies = response.data;
$scope.$apply();
由于您正在使用axios并将角度$scope包裹在其中，因此摘要周期无法读取该更改
使用角度的$http而不是axios
或
如果你想使用axios那么，你可以使用$scope.$apply并包裹$scope.movies = response.data;里面。
喜欢
$scope.$apply(function () {
$scope.movies = response.data;
});
你需要告诉 angularjs 更新 - 调用
$scope.$evalAsync();
设置数据后