角度4:刷新div中的数据

Question

我有一个页面，在从REST服务获得数据DIVs后，在循环中显示数据DIVs，该服务返回一个列表。每个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 of 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();
}

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

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);