Question

有没有办法动态加载详细信息网格？我希望仅当用户在父网格上打开项目时才加载详细信息模板的数据。数据将获取asyc。我找到了这个SO链接 - Detail Template Events ，但我仍然不确定如何使它工作。

我仍然感到困惑，并希望得到任何帮助

以下是我的服务，我的服务模式与下面示例中的服务非常相似。

＆＃13;

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

＆＃13;

我的父组件看起来像

＆＃13;

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

＆＃13;

子组件看起来像

＆＃13;

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

＆＃13;

我确实显示了父网格，但详细的模板似乎没有出现，也没有对详细模板的服务调用，尽管我确实有数据。

我不确定我错过了什么。我没有做过很多可观察的工作，任何帮助都会受到赞赏。对不起，很长的帖子。

Answer 1

详细信息模板始终按需初始化，即当用户展开详细信息项时。

在内部，模板包含在*ngIf指令中，因此仅在状态更改更改为展开时才初始化。

您可以查看此示例以供参考 - http://www.telerik.com/kendo-angular-ui/components/grid/hierarchy/

细节网格在展开时初始化为懒惰。

动态加载主数据中的详细信息网格 - 详细信息网格

1 个答案: