导航

Question

我正在使用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>