打字稿更新视图与进度

Question

我有这个视图，它只是向用户显示一个 loader.gif 和一条消息。我想添加一些进度文本，例如处理 1 of 50 等等。 ts 类调用一个数据服务层，它正在更新数据库，我想在每条记录之间回调 UI。

查看

<div class="modal-body" *ngIf="updateVersionItemsInProgress">
   <div *ngIf="updateVersionItemsInProgress">
      <img src="/Content/images/ajax-loader.gif" /><span>Updating templates...</span>
   </div>
   <label class="col-sm-3 control-label">
      Processing {{currentitem}} of {{items.length}}
   </label>
</div>

ts 文件

private updateItems() {
  let versionKeys = this.items.map(i => i.VersionKey);
  this.updateVersionItemsInProgress = true;
        
  this.templatesManagementService.updateToNewVersion(versionKeys)
}

Answer 1

根据您的数据服务层的设置方式，您可以使用 reportProgress: true 标志来获得一些进度指标，请参阅https://stackoverflow.com/a/54899930/16309059。但是，这不会为您提供个人记录计数。