CODEWITHSUNDEEP
javascriptangular
SK.
SK.

Reputation: 1510

Angular 4 : Refresh data in a div

I have a page where I am showing data DIVs in a loop after getting from a REST service which returns me a list. Each DIV is for one Inspection. After loading data when I click on one A+ or A- to increment/decrement data, I am calling another service. Now this REST call is done from another component. And the REST service returns me only one Inspection (not a list of Inspection). So after getting response from REST, I want to update the counts in that Inspection where I have clicked

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>

Now onClick of A+ or A-, I am calling a POST service (in another component.ts) to update in database and return result.

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 => {
        });
}

Now How I will update the count only in one Inspection without reloading the entire page.

enter image description here Thanks for your help in advance!!

Upvotes: 0

Views: 4523

Answers (1)

LkPark
LkPark

Reputation: 566

Why you won't increment rankAccount for inspection on updateCount and if POST fails you just decrement it, and for decrement action the same you will decrement on click and on fail you just increment it back.

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

Or like this, but I would stick to 3 methods.

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

Upvotes: 1

Related Questions