Angular / NativeScript中可观察数据服务的性能

我正在开发一个NativeScript / Angular应用程序，允许用户浏览文件夹层次结构 . 由于NativeScript使用本机视图的方式，我创建了奇怪的文件夹和偶数文件夹组件，这些组件在用户在层次结构中移动时交替显示 . 两个组件共享相同的模板 . 该模板有一个指向Observable数组的* ngFor异步管道 . 在每个组件的ngOnInit中，我进行了一个服务调用，返回当前可见文件夹的文件夹内容的可观察数组 .

总体而言，这种方法运作良好，并做我想要的 .

但是，在添加功能的过程中，我将我的数据服务更改为具有单个BehaviorSubject，每个服务调用将内容数组推送到其上，以便在后台进程修改文件夹内容时可以更新视图 .

在我进行此转换后，我注意到我的应用程序的性能变得非常糟糕，屏幕之间有几秒钟的延迟 . 当我四处走动时似乎变慢了，但很难量化

我不知道我做错了什么 .

对代码进行充分的讨论 . （这些是仅显示相关代码的例外情况）

Service Code

private _matrixItemList: BehaviorSubject<MatrixItem[]> = new BehaviorSubject([]);

get matrixItems() {
    return this._matrixItemList.asObservable();
}

public listFolderContents(folder: Folder) {

    return this.matrixItemRepository.getFolderContents(folder)
      .then(folderContents => {
        this._matrixItemList.next(folderContents);
      });
}


public listFolderContentsAsObservable(folder: Folder): Observable<MatrixItem[]> {

    return Observable.fromPromise(this.matrixItemRepository.getFolderContents(folder));

}

Folder Component Template

<StackLayout>
        <StackLayout class="matrix-item" *ngFor="let matrixItem of matrixItems | async" (tap)="viewMatrixItem($event, matrixItem)">
            <ng-container *ngIf="matrixItem.type === 'folder'; then folderBlock else photoBlock"></ng-container>
            <ng-template #folderBlock>
                <matrix-folder [folder]="matrixItem"></matrix-folder>
            </ng-template>
            <ng-template #photoBlock>
                <matrix-photo [photo]="matrixItem"></matrix-photo>
            </ng-template>
        </StackLayout>
    </StackLayout>

Folder Component Using BehaviorSubject [SLOW]

ngOnInit() {

        this.matrixItems = this.matrixItemService.matrixItems;

        this.matrixItemCountSubscription = this.matrixItems
          .subscribe(
          matrixItems => {
            this.matrixItemCount = matrixItems.length;
          },
          (error) => {

            console.log("FolderOddComponent - ERROR getting matrixItems");
            console.dir(error);

          });

       this.matrixItemService.listFolderContents(folder);
      });
  }


private onPageUnloaded(eventData) {

    if (this.matrixItemCountSubscription != null) {
      this.matrixItemCountSubscription.unsubscribe();
    }

}

Folder Component Using Observable [FAST]

ngOnInit() {

        this.matrixItems = this.matrixItemService.listFolderContentsAsObservable(folder);

        this.matrixItemCountSubscription = this.matrixItems
          .subscribe(
          matrixItems => {
            this.matrixItemCount = matrixItems.length;
          },
          (error) => {

            console.log("FolderOddComponent - ERROR getting matrixItems");
            console.dir(error);

          });

      });
  }

private onPageUnloaded(eventData) {

    if (this.matrixItemCountSubscription != null) {
      this.matrixItemCountSubscription.unsubscribe();
    }

}