在主数据库中动态加载详细信息表格-详细信息表格 [英] Dynamically load details grid in the master - details grid
问题描述
有没有一种方法可以动态加载详细信息网格?我希望仅当用户在父网格上打开一个项目时才为明细模板加载数据.数据将被异步获取.我确实找到了该SO链接-详细信息模板事件但仍不确定如何使它起作用.
Is there a way to dynamically load details grid ? I am looking to load the data for the detail template only when the user opens an item on the parent grid. the data would be fetched asyc. I did find this SO link - Detail Template Events , but am still not sure how I could make it work .
我仍然受阻，不胜感激
下面是我的服务，我对服务的模式与下例中的服务非常相似.
Below is my service, i patterned my service quite similar to the one in the example below.
import { Injectable, Inject } from "@angular/core";
import { Http, Headers, URLSearchParams, BaseRequestOptions } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Subscription } from "rxjs";
import { Router, ActivatedRoute } from "@angular/router";
import { OnInit, OnDestroy } from "@angular/core";
import { ApiService } from "../../shared/api.service";
import { GridDataResult } from '@progress/kendo-angular-grid';
//import { toODataString } from '@progress/kendo-data-query';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/map'
@Injectable()
export class ObservableGridService extends BehaviorSubject<GridDataResult> {
private params: string;
constructor(private http: Http, private apiService: ApiService, private endPoints: string ) {
super(null);
}
public query(apibaseurl: string, state: any): void {
this.fetch(apibaseurl, this.endPoints,state)
.subscribe(x => super.next(x));
}
private filterToString({ filter }: { filter?: string }): string {
return filter ? `&$filter=${filter}` : '';
}
private fetch(apiBaseUrl: string, endPoints: string, state: any): Observable<GridDataResult> {
//const queryStr = `${toODataString(state)}&$count=true${this.filterToString(state)}`;
var queryStr = '';
if (state.filterValue)
queryStr = `${state.filterValue}`;
console.log(apiBaseUrl + endPoints + queryStr);
let headers = new Headers();
this.createAuthorizationHeader(headers);
headers.append("Content-Type", "application/json; charset=utf-8");
return this.http.get(apiBaseUrl + endPoints + queryStr, {
headers: headers
}).map(response => response.json())
.map(response => (<GridDataResult>{
data: response.values,
total: parseInt(response.count, 10)
}));
}
private createAuthorizationHeader(headers: Headers) {
headers.append("WebToken", this.getParams());
}
private getParams(): string {
let query = new URLSearchParams(window.location.search.slice(1));
this.params = decodeURIComponent(query.get("enc"));
return this.params;
}
}
@Injectable()
export class AccountsGridService extends ObservableGridService {
constructor(http: Http, apiService: ApiService) { super(http, apiService, "/blah1endpoint"); }
}
@Injectable()
export class PropertyGridService extends ObservableGridService {
constructor(http: Http, apiService: ApiService) {
super(http, apiService, '/blah2endpoint');
}
public queryForProperties({ accountId }: { accountId: number },apiBaseUrl, state?: any): void {
let object = Object.assign({}, state, { "filterValue": `&accountId=${accountId}` });
console.log(object);
this.query(apiBaseUrl, Object.assign({}, state, { "filter": `accountId eq ${accountId}` }));
}
}我的父组件看起来像
import { Observable } from 'rxjs/Rx';
import { ApiService } from "../shared/api.service"
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import Contentservice = require("../shared/content/content.service");
import { AccountsGridService } from "./services/observableGrid.service";
import { AcceptedProperties} from './acceptedProperties.component';
@NgModule({
declarations: [AcceptedProperties]
})
@Component({
providers: [AccountsGridService, ApiService],
selector: 'acceptedaccounts',
templateUrl: 'acceptedAccounts.component.html'
})
export class AcceptedAccounts {
public sort: Array<SortDescriptor> = [];
public pageSize: number = 10;
public skip: number = 0;
private apiBaseUrl: string;
private errorMessage: string;
public view: Observable<GridDataResult>;
@ViewChild(GridComponent) grid: GridComponent;
constructor(private accountsservice: AccountsGridService, private apiService : ApiService) { }
public ngOnInit() {
this.apiService.getApIUrl().subscribe(
res => {
this.apiBaseUrl = res;
this.view = this.accountsservice;
this.loadAcceptedAccountsData();
})
}
public dataStateChange({ skip, take, sort }: DataStateChangeEvent): void {
this.skip = skip;
this.pageSize = take;
this.sort = sort;
this.loadAcceptedAccountsData();
}
public ngAfterViewInit(): void {
this.grid.expandRow(0);
}
public loadAcceptedAccountsData() {
this.accountsservice.query(this.apiBaseUrl, { skip: this.skip, take: this.pageSize, sort: this.sort });
}
private handleError(err) {
this.errorMessage = err;
console.error("error");
}子组件看起来像
import { Component, ViewChild, Input } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { NgModule } from '@angular/core';
import { ApiService } from "../shared/api.service"
import {
GridComponent,
GridDataResult,
DataStateChangeEvent,
PageChangeEvent
} from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import Contentservice = require("../shared/content/content.service");
import { PropertyGridService } from "./services/observableGrid.service";
import { Account } from "./services/account";
@Component({
providers: [PropertyGridService],
selector: 'accepted-Properties',
templateUrl: 'acceptedProperties.component.html'
})
export class AcceptedProperties {
@Input() public account: Object;
private gridView: GridDataResult;
public sort: Array<SortDescriptor> = [];
public pageSize: number = 10;
public skip: number = 0;
private apiBaseUrl: string;
private errorMessage: string;
private result: any;
//private displayAccount: Account[];
private view: Observable<GridDataResult>;
constructor(private service: PropertyGridService, private apiService: ApiService) { }
public ngOnInit(): void {
this.apiService.getApIUrl().subscribe(
res => {
this.apiBaseUrl = res;
this.view = this.service;
this.loadAcceptedPropertiesData();
console.log(this.view);
})
}
public loadAcceptedPropertiesData() {
console.log(this.account['id']);
this.service.queryForProperties(this.account['id'], this.apiBaseUrl, { skip: this.skip, take: this.pageSize, sort: this.sort });
}
protected pageChange({ skip, take }: PageChangeEvent): void {
this.skip = skip;
this.service.queryForProperties(this.account['id'], this.apiBaseUrl, { skip, take });
}
我确实显示了父网格，但是详细模板似乎没有显示，并且尽管有数据，也没有针对该详细模板的服务呼叫.
I do get the parent grid displayed, but the detailed template doesn't seem to show up and neither is there a service call for the detailed template, though I do have data.
我不确定我缺少什么.我没有做很多工作，可以观察到，任何帮助将不胜感激.抱歉，很长的帖子.
I am not sure what I am missing. I havent done much work wit observable and any help would be appreciated. Sorry for the long post.
推荐答案
详细信息模板始终按需初始化，即当用户扩展详细信息项时.
The detail template is always initialized on-demand, i.e when the user expands the detail item.
内部将模板包装在 * ngIf 指令中，以便仅在状态更改更改为扩展时才初始化模板.
Internally the template is wrapped inside *ngIf directive so that it is only initialized when the state change changes to expanded.
您可以检查此示例以供参考- http://www.telerik.com/kendo-angular-ui/components/grid/hierarchy/
You can inspect this example for reference - http://www.telerik.com/kendo-angular-ui/components/grid/hierarchy/
详细信息网格在扩展时被延迟初始化.
The detail Grid is initialized lazy on expand.
这篇关于在主数据库中动态加载详细信息表格-详细信息表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
