是否可以使 ng-repeat 延迟一点重绘数组内容

Question

我正在使用 ng-repeat 来（猜测）将数组内容放入表中。 内容是动态绘制的，并且在我修改数组的单个元素时效果很好。但是当我重新加载整个数组时，有一个时刻，数组被重新分配新值，并且 ng-repeat 绘制空白表（这实际上在逻辑上是正确的）。有没有办法以这种方式延迟重绘内容，ng-repeat 忽略数组为空的那一刻？就像内容在没有“清除”时间的情况下切换到新内容一样。

我以这种方式将新元素分配给数组：

items = newItems;

其中items 是 ng-repeat 使用的数组，newItems 是从数据库中新下载的项目数组。当分配发生时，newItems 就完成了。我没有在分配之前做items = [];。

我使用 angular 1.3

编辑：

ng 重复：

<tr ng-repeat="order in submittedOrders"> stuff <\tr>

js:

`$scope.reloadView = function() { $scope.submittedOrders = OrdersService.getOrdersByStatus(ORDER_STATUS.submitted);

};`

是否可以在调用数据库之前（服务从数据库中获取数据）和等待期间首先清除表？

Answer 1

你可能不得不使用Angular的Observables和async pipe。

您可以采取以下几个步骤：

1. 将您的 newItems 转换为 rxjs Subject。

   newItems$ = new Subject();
   

2. 每当您获得数组的新值时，通过主题发出它们。

   this.newItems$.next(newItems);
   

3. 使items 成为newItems$ 的可观察对象，并过滤掉空数组。

    items = this.newItems$.pipe(
      filter((a:any[]) => {
        return a.length != 0;
      })
    );
   

4. 在您的模板中，使用async 管道迭代数组。

   *ngFor="item of items | async"
   

以下是可以帮助您入门的相关代码部分。

import { Observable, of, from, Subject } from 'rxjs';
import { filter, mapTo } from 'rxjs/operators';

...

  newItems$ = new Subject();

  items = this.newItems$.pipe(
    filter((a:any[]) => {
      return a.length != 0;
    })
  );

  ...

  // A test method - link it to (click) handler of any div/button in your template
  // This method will emit a non-empty array first, then, after 1 second emit an empty
  // array, and then, after 2 seconds it will emit a non-empty array again with updated 
  // values.
  testMethod() {
    this.newItems$.next([3,4,5]);
    setTimeout((v) => {
        console.log("Emptying the array - should not be displayed browser");
        this.newItems$.next([]);
    }, 1000);
    setTimeout((v) => {
        console.log("Updating the array - should be displayed in browser");
        this.newItems$.next([3,4,4,5]);
    }, 2000);
  }