1

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.

1
  • Sorry my service is : Commented May 15, 2018 at 11:31

1 Answer 1

1

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)
}
Sign up to request clarification or add additional context in comments.

3 Comments

Hi Tjadi, I didnt notice that i put component instaed of service. I updated my quastion here with service.
I am getting "topromise doesn't exist on type void error here.
that's because you are not returning the observable & you already subscribed to it, i changed the answer so it would work

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.