gpt4 book ai didi

javascript - AngularJS - 在服务中处理异步数据

转载 作者:行者123 更新时间:2023-12-02 19:21:23 25 4
gpt4 key购买 nike

我想在服务中获取一些异步数据,这些数据需要在那里进一步处理。代码位于 plnkr ,

我模拟了一个带超时的异步调用,一旦收到数据,UI 就会更新。但是,我还需要处理服务中的数据(doubleData),然后在我的 UI 中使用。比如说,我需要用一些细节来扩充数据。

由于调用 {{doubleData()}} 时 data 为 null,因此它永远不会填充它。如何实现在我的服务中进一步处理数据的方法(异步填充 - 例如 $http)?

index.html

<!doctype html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="../../../angular-1.0.2/angular.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
{{data}}<br>
{{doubleData()}}
</div>
</body>
</html>

脚本.js

var app = angular.module('myApp',[]);

app.factory('myService', function($timeout) {
var data = [],
doubleData = [];

var myService = {};
myService.async = function() {
$timeout(function(){
data.length = 0;
for(var i = 0; i < 10; i++){
data.push({val: Math.random()});
}
}, 5000);
};
myService.data = function() { return data; };
myService.doubleData = function() {
doubleData = []
for (var i = 0; i < data.length; i++) {
doubleData.push({val: 10* data[i]});
};
return doubleData;
};

return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
myService.async();
$scope.data = myService.data();
$scope.doubleData = myService.doubleData;

});

输出(5秒后):

[{"val":0.4908415926620364},{"val":0.25592787051573396},{"val":0.8326190037187189},{"val":0.6478461190126836},{"val":0.8502937415614724},{"val":0.19280604855157435},{"val":0.06115643493831158},{"val":0.5100495833903551},{"val":0.4134843284264207},{"val":0.5548313041217625}]
[{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null},{"val":null}]

最佳答案

看来您的问题是 for 循环中的拼写错误,您需要访问 data[i].val:

for (var i = 0; i < data.length; i++) {
doubleData.push({val: 10* data[i].val});
};

执行此操作的另一种方法(无需监视变量的更改)是绑定(bind) doubleData ,就像绑定(bind)到 data 一样,并在异步中调用函数回调为空并使用计算值填充 doubleData。看这个plnkr举个例子。

关于javascript - AngularJS - 在服务中处理异步数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12504747/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com