angular4 - 异步数据加载 - 异步ngFor循环？

Question

我目前正在尝试将我的FrontEnd与后端API连接。 我遇到了一个问题，我必须等待后端做出反应。

例如，当我删除其中一个层时，当我调用getTiers（）方法时它不会立即更新，因此我使用 var entries = store.getEntries(); // the entry list. Each entry has the property "title" function checkTitleInput(inputText) { // check the titleInput before creating a new entry if (inputText.length > 0 && // field is empty? /* at least 1 letter */ && // not just a whitespace in it? /* no duplicate */ // no duplicate in the entry list? ) return true; return false; } 为API提供响应的机会得到我前端的更新版本。

如果没有setTimeout，我必须在看到更改之前重新加载页面，例如，在删除其中一个层之后。

有没有更好的方法，是异步工作的？ 我尝试在ngFor循环（setTimeout(() => this.getTiers(), 500);）中使用异步管道，但是这给了我下面的错误：

我的this.tiers对象如下所示：

错误：

<div class="col-md-4" *ngFor="let tier of tiers | async ">

Answer 1

我建议您从前端删除层，然后处理后端。这将为您的用户提供更好的体验，因为他们不必等待服务器的响应。

deleteTier(tier) {
    this.tiers = this.tiers.filter(t => t.id != tier.id);
    this.tierService.deleteTier(tier.id)
      .subscribe(
        (tiers) => console.log('success' + tiers),
        (error) => console.log('Following error appeared: ' + error)
    );}

如果您的后端出现错误，您可以随时在订阅的(error) =>方法中重新添加已删除的teir。