$timeout 的角度使用答案

【问题标题】：Angular use of $timeout$timeout 的角度使用
【发布时间】：2018-04-13 19:22:36
【问题描述】：

我问了here，我还在苦苦挣扎。所以在谷歌搜索了很多之后，我正在考虑使用 $timeout。我愿意接受任何其他建议。

我的最终目标是仅在屏幕上更新计数后向用户显示警报消息。

我不知道如何使用 $timeout。我收到错误：

'(res: any, $timeout: any) => void' 类型的参数不能分配给'(value: Inspection) => void | 类型的参数PromiseLike'

在发布other question 后，我稍微更改了代码。我已在我的 REST 调用中添加了一个布尔元素以验证计数是否达到阈值，并且我已将实际 REST 调用移至 Service.ts

使用下面的代码，我会在更新屏幕上的计数之前收到警报消息组件.ts

updateCount(inspection, rankName: string, rankPlusOrMinus: string)
    {
        inspection.rankName = rankName;
        inspection.rankPlusOrMinus = rankPlusOrMinus;
        this.inspectionService
            .update(inspection).then(function(res) {
                  alert("Reached Threshold: " + res.thresholdReached);
              })
              .catch(function(rej) {
                console.log(rej);
              });
    }

service.ts

  update(inspection: Inspection): Promise<Inspection> {
        const url = '/api/inspection/updatecount/';
        let rankName = inspection.rankName;
        return this.http
            .post(url, JSON.stringify(inspection), {headers: this.headers})
            .toPromise()
            .then(response => {
                //this.alertService.success(`Successfully created associate "${associate.name}"!`, true);
                let data = response.json();
                if (rankName='A') inspection.rankAcount = data.rankAcount;
                if (rankName='B') inspection.rankBcount = data.rankBcount;
                if (rankName='C') inspection.rankCcount = data.rankCcount;
                return response.json() as Inspection;
            })
            .catch(error => {
            });
    }

当我在 component.ts 中传递 $timeout 时出现错误

updateCount(inspection, rankName: string, rankPlusOrMinus: string)
{
    inspection.rankName = rankName;
    inspection.rankPlusOrMinus = rankPlusOrMinus;
    this.inspectionService
        .update(inspection).then(function(res, $timeout) {
            $timeout(function layout() {
              alert(res.thresholdReached);
            }, 30);
        })
              .catch(function(rej) {
                console.log(rej);
              });
    }

【问题讨论】：

你为什么要使用$timeout？那是一个 AngularJS（又名 Angular v1.x）的东西。您正在使用 Angular（又名 Angular v2.x+），所以只需使用 setTimeout(...) 浏览器方法。
我是 Angular 的新手。我正在使用 Angular 4。代码可能对我有很大帮助..谢谢
真的很惊讶为什么要减票？？？我已经把我尝试过的所有代码都放在了里面，并解释了我面临的问题。令人沮丧的是没有评论为什么会有减票......
@SKumar 如果您不知道 AngularJS 与 Angular 不是同一个框架，并且您以某种方式设法认为 $timeout 是 Angular 的一部分，那么您的帖子严重缺乏研究。这基本上相当于尝试在 Java 程序中使用您在 Internet 上找到的一段 C++ 代码。
如果我是正确的，你是想从“/api/inspection/updatecount/”中获取一些数字吗？当你得到那个数字时，你会尝试获得阈值吗？确认一下，以便我为您提供帮助。

标签： javascript angular typescript ecmascript-6

【解决方案1】：

我认为你需要在 updateCount 中更改代码，因为方法只有一个参数

    updateCount(inspection, rankName: string, rankPlusOrMinus: string)
    {
        inspection.rankName = rankName;
        inspection.rankPlusOrMinus = rankPlusOrMinus;
        this.inspectionService
            .update(inspection).then(function(res) {
setTimeout(_=>  alert(res.thresholdReached) , 300); //change code here
            })
                  .catch(rej =>    console.log(rej));
        }

【讨论】：

我现在接受这个答案，因为它现在对我有用。我也愿意接受其他建议。由于我们正在消磨时间来显示警报消息，我有点担心。因为当数据增长，页面复杂度增长时，可能需要更多的时间来更新屏幕上的数据。
能否请您建议如何调用另一个函数而不是alert()。在这种情况下，我可以显示一个确认对话框，如果用户同意，我可以调用另一个 REST 服务。

【解决方案2】：

这就是你的 service.ts 的样子：

updateCount(inspection: string, rankName: string, rankPlusOrMinus: string) {
    let bodyString = JSON.stringify({ inspection: inspection, rankName: rankName, rankPlusOrMinus: rankPlusOrMinus});
    let headers = new HttpHeaders({ 'Content-Type': 'application/JSON' });
    return this._http.post<any>(url, bodyString, { headers: headers });
}

getThreshold(rankName: string, rankAcount: number) {
    let params = new HttpParams()
        .append('rankName', rankName)
        .append('rankAcount', rankAcount.toString());
    return this._http.get<any>(url, { params: params });
}

你的组件应该是这样的：

this.inspectionService.updateCount(inspection, rankName, rankPlusOrMinus)
    .takeUntil(this.ngUnsubscribe)
    .subscribe(
        data => { // here you update your counter },
        error => { this.errorMessage = <any>error; },
        () => { 
            // Here you check threshold, beacuse this part of code will run last 
            this.inspectionService.getThreshold(rankName, rankAcount)
                .takeUntil(this.ngUnsubscribe)
                .subscribe(
                    data => { // here you do your threshold part 
                    alert("Reached Threshold: " + res.thresholdReached); },
                    error => { this.errorMessage = <any>error; },
                    () => {});
    });

【讨论】：