秋田查询 this.selectAll 在服务调用完成之前返回空列表

Question

这是我的 widgetquery.ts

@Injectable({ providedIn: 'root' })
export class WidgetQuery extends QueryEntity<WidgetState, WidgetTO> {
  public Widget$: Observable<WidgetTO> = this.selectActive().filter(k => !!k);
  public WidgetHistorikk$: Observable<WidgetTO[]> = this.selectAll({sortBy: 'WidgetId', sortByOrder: Order.DESC}).filter(k => !!k);

  constructor(protected store: WidgetStore) {
    super(store);
  }
}

在前端我像这样使用 *ngIf：

 <ng-container *ngIf="widgetHistorikk$ | async"> ... </ng-container>

我的组件中的构造函数调用这个函数，从服务调用中获取小部件（服务调用成功...）

  private fetchWidgetHistorikk() {
    this.WidgetService.getWidgetHistorikk().filter(h => !!h).subscribe(liste => {
      this.WidgetStore.add(liste);
    });
  }

但是 selectAll 查询在返回实际数据 [ widget1, widget2 ] 之前返回一个空列表 [ ]。

所以我得到一个空列表，然后是真实数据（填充列表）。

我不想要先出现的空列表（即使实际数据有时可能是空列表）...

为什么我会从秋田获得第一个空列表？

我可以使用某种“标志”或“初始化状态”来告诉秋田：在我的服务调用完成之前不要从查询中返回数据，并且数据通过这一行this.WidgetStore.add(liste); 添加到存储中？

Answer 1

如果您使用实体存储，您可以在初始状态下简单地将 loading 设置为 true，在收到响应后您可以将其更改为 false，并在查询中检查状态是否正在加载显示一些正在加载的 UI 或执行随心所欲。

store.setLoading(true);

您也可以使用combineLatest 或在加载完成时获取数据。

Answer 2

您得到的是空列表，因为 Akita 总是发出初始值，如 docs 中所述。您可以使用 rxjs skip(1) 跳过它（或过滤掉空/未定义的值）

如果你只是不想在 UI 上显示空白内容，你可以说

<ng-container *ngIf="(widgetHistorikk$ | async)?.length > 0"> ... </ng-container>

第三种选择是在商店的加载状态为真时隐藏内容