Angular 剑道ng2电网不'；不刷新导航

我正在使用Angular2和剑道来制作ng2。我有一个带有网格控件的主控/列表页。该列表在每行中提供一个链接，允许用户单击进入详细信息页面。母版页/列表页和详细信息页是单独的视图，而不是彼此的父/子视图

当用户点击细节页面，进行更改，点击保存，细节页面将更新的数据发送到api以更新到数据库。然后它使用ng2路由器导航回主/列表页面

我发现的问题是剑道网格中的数据似乎没有接收到用户刚才所做的任何更改。如果我导航到其他页面，然后导航回主控/列表页面，最后它会显示更新的数据

我使用的是Angular2版本2.2.4和剑道网格版本0.7.0

组件代码：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { GridComponent, GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import { ProspectsService } from './ProspectsService';
import { Prospect } from './prospect';
declare var $: any;
declare var Layout: any;
declare var window: any;

@Component({
    providers: [ProspectsService],
    templateUrl: 'app/prospects/prospect-list.component.html'
})
export class ProspectList implements OnInit, OnDestroy {
    private view: Observable<GridDataResult>;
    private currentProspect: Prospect;
    private pageSize: number = 10;
    private skip: number = 0;
    private sort: SortDescriptor[] = [{ dir: 'asc', field: 'Id' }];
    private currentUsername: string;
    @ViewChild(GridComponent) private grid: GridComponent;

    constructor(private router: Router, private service: ProspectsService) {
    }

    public ngOnInit() {
        this.GetGridSettings();
        this.SaveGridSettings();
        this.LoadData();
        this.view = this.service;
        this.currentUsername = window.Cookies.get('LIQUsername');
    }

    public EditProspect(item: any): void {
        this.router.navigate(['/Prospect', item]);
    }

    public AddProspect(item: any): void {
        this.router.navigate(['/Prospect', 0]);
    }

    public ngAfterViewInit(): void {
        Layout.setSidebarMenuActiveLink('set', $('#MyProspectsLink'));
    }

    public dataStateChange({ skip, take, sort}: DataStateChangeEvent): void {
        this.skip = skip;
        this.pageSize = take;
        this.sort = sort;
        this.SaveGridSettings();
        this.LoadData();
    }

    private LoadData(): void {
        this.service.query({
            skip: this.skip,
            take: this.pageSize,
            sortBy: this.sort[0].field,
            sortDirection: this.sort[0].dir,
            username: this.currentUsername
        });
    }


    public ngOnDestroy() {
        this.service = null;
        this.grid = null;
    }
}

从'@angular/core'导入{Component，ViewChild，OnInit，OnDestroy}；
从'@angular/Router'导入{Router}；
从'rxjs/Rx'导入{Observable}；
从“@progress/kendo angular grid”导入{GridComponent，GridDataResult，DataStateChangeEvent}；
从“@progress/kendo数据查询”导入{SortDescriptor}；
从“/prospectservice”导入{prospectservice}；
从“/Prospect”导入{Prospect}；
声明var$：任何；
声明变量布局：任意；
声明变量窗口：任意；
@组成部分({
提供者：[浏览服务]，
templateUrl:'app/prospects/prospect list.component.html'
})
导出类ProspectList实现OnInit、OnDestroy{
私人视角：可观察；
私人前景：前景；
私人页面大小：数字=10；
私有跳过：编号=0；
私有排序：SortDescriptor[]=[{dir:'asc'，field:'Id'}]；
私有currentUsername:string；
@ViewChild（GridComponent）私有网格：GridComponent；
构造函数（专用路由器：路由器，专用服务：浏览服务）{
}
公共ngOnInit（）{
此参数为.GetGridSettings（）；
这是SaveGridSettings（）；
这是LoadData（）；
this.view=this.service；
this.currentUsername=window.Cookies.get（'liquiserName'）；
}
公共EditProspect（项目：任何）：无效{
this.router.navigate（['/Prospect'，item]）；
}
公共添加潜在客户（项目：任何）：无效{
this.router.navigate（['/Prospect'，0]）；
}
public ngAfterViewInit（）：void{
Layout.setSidebarMenuActiveLink（'set'，$（'MyProspectsLink'））；
}
公共dataStateChange（{skip，take，sort}:DataStateChangeEvent）：void{
this.skip=跳过；
this.pageSize=take；
this.sort=排序；
这是SaveGridSettings（）；
这是LoadData（）；
}
私有LoadData（）：void{
this.service.query({
斯基普：这个，斯基普，
拿这个来说，页面大小，
排序方式：this.sort[0]。字段，
sortDirection:this.sort[0].dir，
用户名：this.currentUsername
});
}
公共恩格德斯特罗（）{
this.service=null；
this.grid=null；
}
}

查看HTML：

<div class="row">
    <div class="col-md-11 col-sm-10">
        <div class="page-head">
            <div class="page-title">
                <h1>My Prospects</h1>
                <small>Click a column header to sort. Use the numbered buttons at the bottom to switch between pages.</small>
            </div>
        </div>
    </div>
    <div class="col-md-1 col-sm-2 col-xs-12">
        <div class="">
            <div class="page-toolbar">
                <div class="page-actions">
                    <a class="btn btn-circle blue-sharp" (click)="AddProspect()">ADD</a>
                </div>
            </div>
        </div>
    </div>
</div>

<ul class="page-breadcrumb breadcrumb">
    <li>
        <a [routerLink]="['/Deals']">Home</a>
        <i class="fa fa-circle"></i>
    </li>
    <li>
        <span class="active">Prospects</span>
    </li>
</ul>

<div class="row">
    <div class="col-md-12 col-lg-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject font-dark bold uppercase">PROSPECT LIST</span>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-responsive">
                    <kendo-grid [data]="view | async"
                                [pageSize]="pageSize"
                                [sortable]="{ mode: 'single' }"
                                [sort]="sort"
                                [skip]="skip"
                                [pageable]="{ buttonCount: 5, info: true, type: numeric, pageSizes: true, previousNext: true }"
                                [scrollable]="'none'"
                                (dataStateChange)="dataStateChange($event)">
                        <kendo-grid-column>
                            <template kendoHeaderTemplate></template>
                            <template kendoCellTemplate let-dataItem><a class="btn btn-circle blue" (click)="EditProspect(dataItem.Id)">EDIT</a></template>
                        </kendo-grid-column>
                        <kendo-grid-column field="Id"></kendo-grid-column>
                        <kendo-grid-column field="FirstName">
                            <template kendoHeaderTemplate>Prospect Name</template>
                            <template kendoCellTemplate let-dataItem>{{ dataItem.FirstName + ' ' + dataItem.LastName }}</template>
                        </kendo-grid-column>
                        <kendo-grid-column field="Company" [style]="{'white-space': 'nowrap'}"></kendo-grid-column>
                        <kendo-grid-column field="Address1" [style]="{'white-space': 'nowrap'}">
                            <template kendoHeaderTemplate>Address</template>
                        </kendo-grid-column>
                        <kendo-grid-column field="City" [style]="{'white-space': 'nowrap'}"></kendo-grid-column>
                        <kendo-grid-column field="State"></kendo-grid-column>
                        <kendo-grid-column field="Zip"></kendo-grid-column>
                        <kendo-grid-column field="ContactFirstName" [style]="{'white-space': 'nowrap'}">
                            <template kendoHeaderTemplate>Contact Person</template>
                            <template kendoCellTemplate let-dataItem>{{ dataItem.ContactFirstName + ' ' + dataItem.ContactLastName }}</template>
                        </kendo-grid-column>
                        <kendo-grid-column field="ContactPhoneAreaCode" [style]="{'white-space': 'nowrap'}">
                            <template kendoHeaderTemplate>Contact Phone</template>
                            <template kendoCellTemplate let-dataItem>{{ dataItem | phone }}</template>
                        </kendo-grid-column>
                        <kendo-grid-column field="ContactEmail">
                            <template kendoHeaderTemplate>Contact Email</template>
                        </kendo-grid-column>
                        <kendo-grid-column field="TenantBroker">
                            <template kendoHeaderTemplate>Tenant Broker</template>
                        </kendo-grid-column>
                    </kendo-grid>
                </div>
            </div>
        </div>
    </div>
</div>

我的前景
单击要排序的列标题。使用底部的编号按钮在页面之间切换。
添加


家


前景


潜在客户名单
编辑
潜在客户名称
{{dataItem.FirstName+'+dataItem.LastName}
地址
联系人
{{dataItem.ContactFirstName+'+dataItem.ContactLastName}}
联络电话
{{dataItem | phone}}
联系电子邮件
租客经纪人