Question

当我尝试更改页面时pageSize，当我尝试更改页面时，{Angner 2 - Meteor instructions for pagination会出现此错误：

totalItems

我的文件是他们教程的简化版本：

    Exception in queued task: EXCEPTION: Error in client/components/entities/players/player-list.html:2:8
    ORIGINAL EXCEPTION: TypeError: Cannot read property 'type' of undefined
    ORIGINAL STACKTRACE:
    TypeError: Cannot read property 'type' of undefined
        at AppElement.detachView (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:11331:17)
        at ViewContainerRef_.remove (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:11531:34)
        at NgFor._bulkRemove (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:21719:37)
        at NgFor._applyChanges (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:21684:33)
        at NgFor.ngDoCheck (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:21670:22)
        at DebugAppView._View_PlayerList0.detectChangesInternal (PlayerList.template.js:94:41)
        at DebugAppView.AppView.detectChanges (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:12703:14)
        at DebugAppView.detectChanges (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:12808:44)
        at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:12729:19)
        at DebugAppView._View_PlayersPage0.detectChangesInternal (PlayersPage.template.js:395:8)
    ERROR CONTEXT:
    [object Object]
    9debug.js:41 Exception in queued task: TypeError: Cannot read property 'splice' of null
        at MongoCursorObserver._removeAt (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:77671:19)
        at removedAt (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:77649:35)
        at http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:77364:20
        at ZoneDelegate.invoke (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:124251:29)
        at Zone.run (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:124144:44)
        at Object.removedAt (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:77363:23)
        at removed (http://localhost:3000/packages/minimongo.js?hash=88217d643bc16fdf3505c6d4b2b8f5ddc400c49a:3745:28)
        at self.applyChange.removed (http://localhost:3000/packages/minimongo.js?hash=88217d643bc16fdf3505c6d4b2b8f5ddc400c49a:3674:44)
        at http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:77364:20
        at ZoneDelegate.invoke (http://localhost:3000/packages/modules.js?hash=fa01f730b3659d348eabf8ba338dffb7d96b4033:124251:29)

相关的HTML：

import { Component }   from '@angular/core';
import { Players } from '../../../../collections/players';
import { Mongo }       from 'meteor/mongo';
import { MeteorComponent } from 'angular2-meteor';
import { ReactiveVar } from 'meteor/reactive-var';
import { PaginationService, PaginatePipe, PaginationControlsCmp } from 'angular2-pagination';

@Component({
  selector: 'player-list',
  viewProviders: [PaginationService],
  templateUrl: 'client/components/entities/players/player-list.html',
  directives: [PaginationControlsCmp],
  pipes: [PaginatePipe]
})
export class PlayerList extends MeteorComponent{
  players: Mongo.Cursor<Party>;
  pageSize: number = 5;
  curPage: ReactiveVar<number> = new ReactiveVar<number>(1);
  nameOrder: number = 1;

  constructor() {
    super();

    this.autorun(() => {
      let options = {
        limit: this.pageSize,
        skip: (this.curPage.get() - 1) * this.pageSize,
        sort: { name: this.nameOrder }
      };

      this.subscribe('players', options, () => {
        this.players = Players.find({}, { sort: { name: this.nameOrder } });
      }, true);
    });
  }

  onPageChanged(page: number) {
    this.curPage.set(page);
  }
}

我已经检查了<div> <ul> <li *ngFor="let player of players | paginate:{currentPage: 1, itemsPerPage: pageSize, totalItems: 14}"> <p>{{player.name}}</p> </li> </ul> <pagination-controls (change)="onPageChanged($event.page)"></pagination-controls> </div>函数，以验证每次都返回正确数量的文档。（使用publish正确衡量.fetch().length）

的影响

我尝试了什么 我改变了：

limit: 10

为：

this.players = Players.find({}, { sort: { name: this.nameOrder } });

可防止在更改分页页面时出现上述错误。

这会产生一个新的（非破坏性）错误，其中集合的this.players = Players.find({}, { sort: { name: this.nameOrder } }).fetch();在切换页面后从5变为10 - 再次切换页面似乎让它保持在10。好像订阅正在记住即使length日志显示要返回的正确文档数，也可以从上次订阅调用中获取文档。

问题

publish应该使用游标吗？如果是这样，可能导致错误发生的原因是什么？
订阅是否记得以前的文件？我尝试存储订阅并调用ngFor，但这导致界面出现故障。

Answer 1

ngFor是否应该使用游标？如果是这样，可能会导致什么发生错误？

是的，它有效，但它有缺陷。我之前创建了this issue。但现在它有时仍然是马车。当您使用sort时会发生这种情况。

原因似乎是因为当Mongo.Cursor与sort一起使用时，当这些项目的顺序发生变化时，它无法正确触发Angular 2的变更检测。您可以从问题中发布的错误中看到它。

随时在github上创建一个带有复制品的问题。

如果您使用ngrx拥有应用状态，或者您拥有自己的应用状态，通常会将Array保存在应用状态而不是Mongo.Cursor。应用程序状态中的数组可帮助我们跟踪和查找问题，因为我们始终知道数组中的内容。

（特殊情况，如果您拥有大量数据，可能有数千个项目，则需要使用Mongo.Cursor以避免使用Array，因为fetch()需要时间）

一个好消息是，即将发布返回Observable的新API。没有更多光标，请在此处跟踪：https://github.com/Urigo/angular2-meteor/pull/358

订阅是否记住前一个是有原因的文件？

查看我的演示文稿Desugar Meteor, Angular 2, RxJS 5, and ngrx第34页：

这就是Meteor的工作原理。如果您没有停止订阅，并尝试订阅其他时间（请注意相同的收藏，在您的情况下为Players收藏），旧数据仍将保留在蓝色矩形中（在Minmongo）。 Meteor将在蓝色矩形（Players集合）中添加新数据，因此蓝色矩形将变得越来越大。

两种方式：

1）你已经尝试过的第一种方式。停止订阅。并订阅另一次。这样您就可以清除Minmongo中的Players集合。但不是一个非常好的方式。这会导致不必要的stop和resubscribe。花费时间，让您的页面闪烁。

2）添加搜索条件：

Players.find({
  // add your search conditions here, limit to the data you need
}, { sort: { name: this.nameOrder } })

在演示页面34中，这意味着尽管Minmongo中有大量数据。但是你只需要黄色矩形部分数据。

Meteor Angular 2无法获得分页教程

1 个答案: