Angular - Data not refreshing after click

Question

After De-Activating row from my data table, I am refreshing my table.I pass the load function after deactivate function but problem is that i have to click twice and sometimes it goes with one click.

I am using MVC5. I put the debug on my C# file and everytime i click Deactivate debugger going to load function.
Below is my code :

<div style="margin-top:60px">
    <h1 style="float:left">All Machines</h1>
    <button (click)="OnSave()" style="float:right;background-color:aqua;color:black" class="md-button md-primary md-raised">
        Add New Machine
    </button>
    <table class="table" style="width:100%; background-color:#E0F2F1">
        <thead>
            <tr>
                <th style="text-align:center">

                    Id
                </th>
                <th style="text-align:center">

                    Machine Number

                </th>
                <th style="text-align:center">

                    Manufacturer

                </th>
                <th style="text-align:center">

                    Model#

                </th>
                <th style="text-align:center">

                    Serial#

                </th>

                <th style="text-align:center">

                    Tonnage

                </th>
                <th style="text-align:center">

                    Shot Weight

                </th>

                <th style="text-align:center">

                    De-Activate

                </th>

            </tr>

            <tr></tr>
        </thead>

        <tbody>
            <tr *ngFor="let MyMachine of MyMachines">
                <td style="text-align:center">{{MyMachine.t_id}}</td>
                <td style="text-align:center">{{MyMachine.t_Machine}}</td>
                <td style="text-align:center">{{MyMachine.t_manufacturer}}</td>
                <td style="text-align:center">{{MyMachine.t_model}}</td>
                <td style="text-align:center">{{MyMachine.t_Serial}}</td>
                <td style="text-align:center">{{MyMachine.t_ClampingForce}}</td>
                <td style="text-align:center">{{MyMachine.t_ShotWt}}</td>
                <td><button (click)="OnDeactivate(MyMachine.t_id)" style="float:right;background-color:aqua;color:black" class="md-button md-primary md-raised">De-Activate</button></td>
            </tr>
        </tbody>
    </table>
</div>

2) Component

import { Component, OnInit } from '@angular/core';
import { AllMachines } from './app.service'
@Component({
    selector: 'my-app',
    templateUrl: './MachineList.html'
})
export class AppComponent implements OnInit {
    MyMachines: any = [];

    constructor(private _AllMachines: AllMachines) {

    }

    ngOnInit() {
        this.LoadData();
    }
    OnSave() {
        this._AllMachines.AddNewMachine('bbb', 'bbb', 'bbb');

    }

    OnDeactivate(id: string) {
        this._AllMachines.DeActivateMachine(id);
        this.LoadData();

    }

    LoadData() {
        this._AllMachines.getAllMachines()
            .subscribe(resmachineData => this.MyMachines = resmachineData);
    }

}

3) Service

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AllMachines {
    private configUrl: string = "/Home/GetAllMachines";
    private AddUrl: string = "/Home/AddNewMachine";
    private UpdateUrl: string = "/Home/UpdateMachine";
    private DeActivateUrl: string = "/Home/DeActivateMachine";
    constructor(private http: Http) { }
    headers = new Headers({
        'Content-Type': 'application/json'
    });
    getAllMachines() {
        return this.http.get(this.configUrl)
            .map((response: Response) => response.json());
    }

    AddNewMachine(_MachineNum: string, _Manufatured: string, _MachineModel: string) {
        let body = JSON.stringify({ MachineNum: _MachineNum, Manufatured: _Manufatured, MachineModel: _MachineModel });
        let headers = new Headers({ 'content-type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        this.http.post(this.AddUrl, body, options).subscribe(
            data => console.log(data),
            err => console.log(err.json().message),
            () => console.log('Authentication Complete')
        );

    }

    UpdateMachine(_MachineId: string, _MachineNum: string, _Manufacturer: string, _Model: string, _Serial: string, _Tonnage: string, _ShotWt: string) {
        let body = JSON.stringify({ MachineId: _MachineId, MachineNum: _MachineNum, Manufacturer: _Manufacturer, Model: _Model, Serial: _Serial, Tonnage: _Tonnage, ShotWt: _ShotWt });
        let headers = new Headers({ 'content-type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        this.http.post(this.UpdateUrl, body, options)
            .subscribe(
                data => console.log(data),
                err => console.log(err.json().message),
                () => console.log('Authentication Complete')
            );
    }

    DeActivateMachine(_MachineId: string) {
        let body = JSON.stringify({ MachineId: _MachineId });
        let headers = new Headers({ 'content-type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        this.http.post(this.DeActivateUrl, body, options)
            .subscribe(
                data => console.log(data),
                err => console.log(err.json().message),
                () => console.log('Authentication Complete')
            );
    }
}

I am using MVC5. I put the debug on my C# file and everytime i click Deactivate debugger going to load function.

tjadli tjadli · Accepted Answer · 2018-05-14T21:26:18

it's a logical behavior, placing your loaddata after deactivateMachine doesn't assure that it will be executed after the change is done, they are multiple solutions here depends on your service, the straighforward one would be to use toPromise to transforme your observable to a promise and then fire your load data

 OnDeactivate(id: string) {
    this._AllMachines.DeActivateMachine(id).toPromise().then(()=> {
       this.LoadData();
    } );
}

You should change your service to

DeActivateMachine(_MachineId: string) {
    let body = JSON.stringify({ MachineId: _MachineId });
    let headers = new Headers({ 'content-type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this.DeActivateUrl, body, options)
}

Angular - Data not refreshing after click

1 Answers