Angular - 单击后数据不刷新

时间:2018-05-14 20:53:15

标签: angular

从我的数据表中取消激活行后,我正在刷新我的表。我在停用函数后传递加载函数但问题是我必须单击两次,有时只需单击一下。

我正在使用MVC5。我把调试放在我的C#文件上,每次我点击Deactivate debugger to load function 以下是我的代码:



c.data.list[i].required_fields.display_value.split(',')




2)组件



<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>
&#13;
&#13;
&#13;

3)服务

&#13;
&#13;
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);
    }

}
&#13;
&#13;
&#13;

我正在使用MVC5。我把调试放在我的C#文件上,每次我点击Deactivate debugger to load function。

1 个答案:

答案 0 :(得分:1)

它是一种逻辑行为,在deactivateMachine之后放置你的loaddata并不能保证它会在更改完成后执行,它们是多种解决方案,这取决于你的服务,直截了当的将是使用toPromise将您的observable转换为promise,然后触发您的加载数据

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

您应该将服务更改为

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