Dynamisches Laden von Details Raster im Master - Details Raster

Question

Gibt es eine Möglichkeit, dynamisch Details Raster laden? Ich möchte nur die Daten für die Detailvorlage laden, wenn der Benutzer ein Element im übergeordneten Raster öffnet. Die Daten würden asyc abgerufen werden. Ich habe diesen SO-Link gefunden - Detail Template Events , bin mir aber immer noch nicht sicher, wie ich es zum Laufen bringen könnte.

Ich bin immer noch stecken bleiben und würde es begrüßen jede Hilfe

Unten ist mein Service, ich meine Service ganz ähnlich dem im Beispiel unten gemustert.

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

und meine Eltern Komponente sieht aus wie

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

das Kind Komponente

wie

aussieht

ich das übergeordnete Raster angezeigt bekommen, aber die detaillierte Vorlage scheint nicht zu zeigen, und weder gibt es einen Service-Aufruf für die detaillierte Vorlage, obwohl ich Daten zu tun haben.

Ich bin mir nicht sicher, was ich vermisse. Ich habe nicht viel Arbeit mit beobachtbaren getan und jede Hilfe würde geschätzt werden. Entschuldigung für die lange Post.

Answer 1

Die Detailvorlage wird immer bei Bedarf initialisiert, d. H. Wenn der Benutzer das Detailelement erweitert.

Intern ist die Vorlage in die Anweisung *ngIf eingeschlossen, so dass sie nur initialisiert wird, wenn sich die Statusänderung zu erweitert ändert.

Sie können dieses Beispiel als Referenz inspizieren - http://www.telerik.com/kendo-angular-ui/components/grid/hierarchy/

Das Detail Grid ist faul initialisiert auf erweitern.