角度使用$ timeout

时间:2018-04-13 19:22:36

标签: javascript angular typescript ecmascript-6

我问了问题here,我仍在努力。所以经过谷歌搜索后,我正在考虑使用$ timeout。我对任何其他建议持开放态度。

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

我没有得到如何使用$ timeout。我收到错误

  

类型的参数'(res:any,$ timeout:any)=>空隙'不能分配类型'(值:检验)=>的参数无效| PromiseLike'

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

使用以下代码,我在更新屏幕上的计数之前收到警报消息 component.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);
              });
    }

2 个答案:

答案 0 :(得分:0)

我认为你需要在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));
        }

答案 1 :(得分:0)

这就是你的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; },
                    () => {});
    });