我正在使用Angular2和Kendo for ng2 . 我有一个带网格控件的主/列表页面 . 该列表在每行中提供一个链接，以允许用户单击进入详细信息页面 . 主/列表页面和详细信息页面是单独的视图，而不是彼此的父/子 .
当用户点击详细信息页面，进行更改，点击保存，详细信息页面将更新的数据发送到api以更新到数据库时，会发生什么 . 然后它使用ng2路由器导航回主/列表页面 .
我发现的问题是，剑道网格中的数据似乎没有发现用户刚刚做出的任何更改 . 如果我导航到其他页面，然后导航回主/列表页面，最后它会显示更新的数据 .
我正在使用Angular2版本2.2.4和Kendo Grid版本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;
}
}
查看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>