マスター詳細グリッドの詳細グリッドを動的にロード

Question

詳細グリッドを動的にロードする方法はありますか？ユーザーが親グリッド上のアイテムを開いたときにのみ、詳細テンプレートのデータをロードしようとしています。データはasycにフェッチされます。私はこのSOのリンクを見つけました - Detail Template Events 、しかし私はそれを動作させる方法をまだよく分かりません。

私はまだ立ち往生していますし、以下

は私のサービスであり、任意の助けをいただければ幸い、私は以下の例のものと非常に似て、私のサービスをパターン化。

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

のように見えます

は、私が表示され、親のグリッドを得るかが、詳細なテンプレートが現れていないようだと、私はデータを持っているものの、どちらも詳細なテンプレートのためのサービスコールは、ありません。

私は何が欠けているのか分かりません。私は観察可能な多くの仕事ウィットを行ったhaventと任意の助けをいただければ幸いです。長い投稿を申し訳ありません。

Answer 1

詳細テンプレートは、オンデマンドで常に初期化されます。つまり、ユーザーが詳細アイテムを展開するときです。

テンプレートは内部的に*ngIfディレクティブ内にラップされているため、状態の変更が展開に変わったときにのみ初期化されます。

あなたは、参考のために、この例を検査することができます - http://www.telerik.com/kendo-angular-ui/components/grid/hierarchy/

詳細グリッドを展開する上で遅延初期化されます。