Question

我有一个页面，我从REST服务返回一个列表后，在循环中显示数据DIV。每个DIV用于一次检查。当我点击一个A +或A-来加载/减少数据时加载数据后，我正在调用另一个服务。现在，这个REST调用是从另一个组件完成的。 REST服务只返回一个检查（不是检查列表）。因此，在收到REST的响应后，我想更新检查中我点击的计数

Main.component.html

<p>Filter Data goes here</p>

<div class="wrapper">
    <div class="box" *ngFor="let inspection of inspectionList let index=index; let odd=odd; let even=even">
        <app-inspection [inspect]="inspection"></app-inspection>
    </div>
</div>

Main.component.ts

ngOnInit() {
    this.http
        .get('api/inspection/1')
        .toPromise()
        .then(response => {
            let data = response.json();
            if (data.inspectionList) this.inspectionList = data.inspectionList;
        })
        .catch(error => {
        });
}

insp.component.html

<div class="row">
    <div> {{inspect.inspectionDescription}} </div> 
    <table>
        <tr>
            <td><a [routerLink]="" (click)="updateCount(inspect.id, 1, 'AM')" class="btn btn-success">A-</a></td>
            <td>{{inspect.rankAcount}}</td>
            <td><a [routerLink]="" (click)="updateCount(inspect.id, 1, 'AP')" class="btn btn-danger">A+</a></td>
        </tr>

现在onClick A +或A-，我正在调用POST服务（在另一个component.ts 中）来更新数据库并返回结果。

insp.component.ts

updateCount() {
    this.http
        .post(url, params, {headers: this.headers})
        .toPromise()
        .then(response => {
            let data = response.json();
            if (data.rankAcount) alert(data.rankAcount);
        })
        .catch(error => {
        });
}

现在我将如何仅在一次检查中更新计数而不重新加载整个页面。

感谢您的帮助!!

Answer 1

为什么你不会增加rankAccount以便在updateCount上进行检查，如果POST失败你就会减少它，而对于递减操作，你将减少点击和失败，你只需将其递增。

incrementCount(inspect, modelId, rank) {
    inspection.rankAcount += rank;
    updateCount({
        inspectionId: inspect.id,
        modelId: modelId,
        rankChange: inspection.rankAcount
    }).then(() => {
        // etc.
    }).catch(() => {
        inspection.rankAcount -= rank;
    });
}

decrementCount(inspect, modelId, rank) {
    inspection.rankAcount -= rank;
    updateCount({
        inspectionId: inspect.id,
        modelId: modelId,
        rankChange: inspection.rankAcount
    }).then(() => {
        // etc.
    }).catch(() => {
        inspection.rankAcount += rank;
    });
}

updateCount(params) {
    this.http.post(url, params, {headers: this.headers}).toPromise();
}

或者像这样，但我会坚持3种方法。

updateCount(inspection, nr) {
    inspection.rankAcount += nr;
    this.http.post(url, params, {headers: this.headers}).toPromise().then(() => {
        // etc.
    }).catch(() => {
        inspection.rankAcount -= nr;
    });
}

updateCount(inspection, 1);
updateCount(inspection, -1);

Angular 4：刷新div中的数据

1 个答案: