承诺使用PouchDB和AngularJs ng-repeat数组

时间:2021-12-17 21:31:22

I'm reading the allDocs() from a PouchDB database into an AngularJS variable:

我正在将allDocs()从PouchDB数据库读入一个AngularJS变量:

var db = pouchService.db;
$scope.recordlist = db.allDocs({startkey: 'move_', endkey: 'move_\uffff', include_docs: true});
console.log($scope.recordlist);

I've noticed that it returns a promise, and when I try to read the array (and properties of the objects inside the array) using ng-repeat, it can't actually access the results, I guess because they are deeply nested.

我注意到它返回一个承诺,当我尝试使用ng-repeat来读取数组(以及数组中对象的属性)时,它实际上无法访问结果,我猜是因为它们是深度嵌套的。

<div class="row msf-row" 
     ng-repeat="record in recordlist | filter: shouldShow" 
     ng-class="{ 'msf-cancelled': record.cancelled, 'msf-commented' : record.comment}">
       <div class="col-md-1">{{record.time}}</div>
</div>

Is there any way to turn this promise into a simple array of objects?

有没有办法把这个承诺变成一个简单的对象数组?

承诺使用PouchDB和AngularJs ng-repeat数组

I have LoDash loaded in the app also, I don't know if it could be of use.

我已经在app中加载了LoDash,我不知道它是否有用。

2 个解决方案

#1


3  

Assign the array after the promise was fulfilled (or show an error if an error happened):

在承诺完成后分配数组(或发生错误时显示错误):

$q.when(db.allDocs({startkey: 'move_', endkey: 'move_\uffff', include_docs: true}))
  .then(function (recordlist) {
    $scope.recordList = recordList;
    console.log($scope.recordlist);
  })
  .catch(function (error) {
    console.error(error);
  });

Update: As Matt pointed out in the comments, if you're not using angular-pouch angular-pouchdb wrapper then you will need to wrap the action in a $scope.$apply() to trigger the digest cycle or first convert the promise to an angular promise with $q.when(). I think converting the promise to an angular promise would also take care of logging errors, but you should always handle errors (show the user a message). You could do this of course with a global error handler.

更新:正如Matt在评论中指出的,如果您不使用angular-pouch angular-pouchdb包装器,那么您需要将操作包装在$范围内。我认为将承诺转换成一个有角的承诺也会处理日志错误,但您应该始终处理错误(向用户显示消息)。当然,您可以使用全局错误处理程序来实现这一点。

#2


1  

What you are doing is accessing the promise, and the not the promise results. While allDocs does indeed return a promise, it is not an angular promise, so you should also wrap the promise in a when to get an actual angular promise.

你所做的是接近承诺,而不是承诺的结果。虽然allDocs确实会回报一个承诺,但它并不是一个有棱角的承诺,所以你也应该在什么时候得到一个真正有棱角的承诺。

var pouchPromise = db.allDocs({startkey: 'move_', endkey: 'move_\uffff', include_docs: true});
$q.when(pouchPromise).then(function(recordList){
    $scope.recordList = recordList;
    console.log($scope.recordlist);
});

I would read up on how promises work here.

我会读一下这里的承诺是如何运作的。

It should be noted that this method of utilising pouch is outlined in the actual pouchDB docs here: http://pouchdb.com/api.html

应该注意的是,这种使用袋的方法是在实际的pouchDB文档中概述的:http://pouchdb.com/api.html。

Specifically:

具体地说:

Using Ionic/Angular? You can wrap PouchDB promises in $q.when(). This will notify Angular to update the UI when the PouchDB promise has resolved.

使用离子/角吗?您可以用$ qwhen()包装PouchDB承诺。当PouchDB承诺解决后,这将通知angle更新UI。

This will allow you to avoid using $scope.$apply() when dealing with the asynchronous nature of non angular promises.

这将使您避免在处理非角承诺的异步性质时使用$scope.$apply()。

#1


3  

Assign the array after the promise was fulfilled (or show an error if an error happened):

在承诺完成后分配数组(或发生错误时显示错误):

$q.when(db.allDocs({startkey: 'move_', endkey: 'move_\uffff', include_docs: true}))
  .then(function (recordlist) {
    $scope.recordList = recordList;
    console.log($scope.recordlist);
  })
  .catch(function (error) {
    console.error(error);
  });

Update: As Matt pointed out in the comments, if you're not using angular-pouch angular-pouchdb wrapper then you will need to wrap the action in a $scope.$apply() to trigger the digest cycle or first convert the promise to an angular promise with $q.when(). I think converting the promise to an angular promise would also take care of logging errors, but you should always handle errors (show the user a message). You could do this of course with a global error handler.

更新:正如Matt在评论中指出的,如果您不使用angular-pouch angular-pouchdb包装器,那么您需要将操作包装在$范围内。我认为将承诺转换成一个有角的承诺也会处理日志错误,但您应该始终处理错误(向用户显示消息)。当然,您可以使用全局错误处理程序来实现这一点。

#2


1  

What you are doing is accessing the promise, and the not the promise results. While allDocs does indeed return a promise, it is not an angular promise, so you should also wrap the promise in a when to get an actual angular promise.

你所做的是接近承诺,而不是承诺的结果。虽然allDocs确实会回报一个承诺,但它并不是一个有棱角的承诺,所以你也应该在什么时候得到一个真正有棱角的承诺。

var pouchPromise = db.allDocs({startkey: 'move_', endkey: 'move_\uffff', include_docs: true});
$q.when(pouchPromise).then(function(recordList){
    $scope.recordList = recordList;
    console.log($scope.recordlist);
});

I would read up on how promises work here.

我会读一下这里的承诺是如何运作的。

It should be noted that this method of utilising pouch is outlined in the actual pouchDB docs here: http://pouchdb.com/api.html

应该注意的是,这种使用袋的方法是在实际的pouchDB文档中概述的:http://pouchdb.com/api.html。

Specifically:

具体地说:

Using Ionic/Angular? You can wrap PouchDB promises in $q.when(). This will notify Angular to update the UI when the PouchDB promise has resolved.

使用离子/角吗?您可以用$ qwhen()包装PouchDB承诺。当PouchDB承诺解决后,这将通知angle更新UI。

This will allow you to avoid using $scope.$apply() when dealing with the asynchronous nature of non angular promises.

这将使您避免在处理非角承诺的异步性质时使用$scope.$apply()。