Question

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

我正在以这种方式为数组分配新元素：

items = newItems;

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

我是优角1.3

编辑：

ng-repeat：

<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。

您可以采取以下步骤：

将您的newItems转换为rxjs Subject。
```
newItems$ = new Subject();
```
每当获得数组的新值时，就通过主题发出它们。
```
this.newItems$.next(newItems);
```

使items为newItems$的可观察值，并过滤出空数组。

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

在模板中，使用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);
  }

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

1 个答案: