Javascript Angular：DOM更新后调用方法

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

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

在调用下一个rest调用之前，我必须显示一个确认对话框。但在更新屏幕上的计数之前会显示该对话框。

这是我的代码：

component.html

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

---

如果您有权编辑API，我认为作为第一篇文章的结果，在JSON对象中返回阈值是有意义的。这样，您就不必单独打电话来获取阈值。您也可以只返回一个布尔值来判断是否达到阈值

例如：

this.http
.post（url、JSON.stringify（检查）{
headers:this.headers
})
.toPromise（）
。然后（响应=>{
让data=response.json（）；
设threshold=data.threshold；
让结果=数据。检查；
if（rankName='A'）{
inspection.rankAcount=结果.rankAcount；
如果（result.rankAccount==阈值）{
//这里是确认框。
}
}
})
.catch（错误=>{}
}

您可以使用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);
});
...

---

检查答案。有两种可能的方法。我想在您的情况下，超时应该有效不，我没有访问后端的权限。在更新屏幕上的值之前，确认框会出现。我对第一种解决方案有点困惑。请您再解释一下。@SKumar所以在第一种解决方案中，您可以通过调用

sendToSer将数据发送到服务器ver

返回

Observable

。此处使用

flatMap

调用

阈值

api。它对您有效吗？不，我必须在调用下一个rest调用之前显示一个确认对话框。但是该对话框在更新屏幕上的计数之前显示。您的第二个解决方案有效。我的意思是如果我编写在setTimeout（）中创建一个警报（），然后它就工作了。但是如果我调用getThreshold函数，它会抛出错误。无法读取Undefinedy的属性“getThreshold”。您可以使用第一个解决方案并在timeout中显示警报。

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