Angular：DOM更新后的调用方法

Question

我正在调用从 html 到 increment/decrement 的方法（调用休息服务）在屏幕上计数。现在我想调用另一个方法（即 getThreshold）来检查计数是否达到阈值。如果是，我想显示一条确认消息。

我想先更新屏幕上的计数，然后调用函数检查它是否达到阈值。但现在它是先调用函数和 rest 调用，然后更新屏幕上的计数。

我必须在调用下一个休息调用之前显示一个确认对话框。但是在更新屏幕上的计数之前会出现对话框。

所以这是我的代码：

component.html

<table>
  <tr>
    <td><a [routerLink]="" (click)="updateCount(inspect, 'A', 'M')" class="btn btn-success">A-</a></td>
  </tr>
  </table

component.ts

updateCount(inspection, rankName: string, rankPlusOrMinus: string) {
  inspection.rankName = rankName;
  inspection.rankPlusOrMinus = rankPlusOrMinus;
  const url = '/api/xyz';
  this.http
    .post(url, JSON.stringify(inspection), {
      headers: this.headers
    })
    .toPromise()
    .then(response => {
      let data = response.json();
      if (rankName = 'A') inspection.rankAcount = data.rankAcount; ** // if I call getThreshold from here, it calls the function and rest call and displays alert message. But the count in A is NOT increamented yet**
    })
    .catch(error => {}
    }

  getThreshold(rankName: string, rankAcount: number) {
    const url = '/api/threshold';
    this.http
      .get(url)
      .toPromise()
      .then(response => {
        // Some Logic
        // Show alert message
      })
      .catch(error => {});
  }
}

Answer 1

如果您有权编辑 API，我认为 return 作为第一个 POST 的结果的 JSON 对象中的阈值是有意义的.这样您就不必单独调用来获取阈值。您也可以 return 一个布尔值来表示是否达到阈值。

示例：

this.http
  .post(url, JSON.stringify(inspection), {
    headers: this.headers
  })
  .toPromise()
  .then(response => {
    let data = response.json();
    let threshold = data.threshold;
    let result = data.inspection;
    if (rankName = 'A') {
      inspection.rankAcount = result.rankAcount;
      if (result.rankAccount == threshold) {
        //confirmation box here.
      }
    }
  })
  .catch(error => {}
  }

Answer 2

您可以使用 flatMap 将 API 排序为：

updateCount(inspection, rankName: string, rankPlusOrMinus: string) {
    this.sendToServer(inspection, rankName, rankPlusOrMinus).flatMap((countResult) => {
        // Here you can update your view
        inspection.rankAcount = countResult.rankAcount;
        return this.http.get('/api/threshold').subscribe(response => {
                    // Some Logic
                    // Show alert message
                                    setTimeout(() => {alert('hi');});
               });
            }
        }
    );
}

sendToServer(inspection, rankName, rankPlusOrMinus) {
    inspection.rankName = rankName;
    inspection.rankPlusOrMinus = rankPlusOrMinus;
    const url = '/api/xyz';
    this.http.post(url, JSON.stringify(inspection), {headers: this.headers}).map((res: Response) => res.json());
}

解决方案 2

在第一个 API 的回复后添加 timeout：

...
if (rankName = 'A') inspection.rankAcount = data.rankAcount;
setTimeout(() => {
    this.getThreshold(rankName, rankAcount);
});
...

Angular：DOM更新后的调用方法

Angular: Call method after DOM update

javascript

angular

angularjs-scope