у меня есть сомнения в angular ng-template. я использовал mycomponent внутри ng-temmplate, затем попытался взять экземпляр моего компонента, но он возвращает undefined
Я пробовал, как показано ниже:
Пример — https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-hrguvv?file=app.component.ts
HTML:
<div class="control-section">
<ejs-grid #grid [dataSource]='empData' (detailDataBound)="detailsDataBound($event)" id='Grid'>
<ng-template #detailTemplate let-data>
<ng-container *ngTemplateOutlet="check"></ng-container>
</ng-template>
<e-columns>
<e-column field="id" headerText="നമ്പർ" width="6%"></e-column>
<e-column field="slNo" headerText="നമ്പർ" width="6%"></e-column>
</e-columns>
</ejs-grid>
</div>
<ng-template #check>
<ejs-grid #childComponent allowPaging='true' (load)='load($event)' [pageSettings]='pageSettings'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'>
</e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'>
</e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
</e-columns>
</ejs-grid>
</ng-template>App.component.ts:
export class AppComponent {
// Tried like below but no luck
@ViewChild('childComponent', {static: false})
private compInsideTemplate: GridComponent;
@ViewChild('grid', {static: true})
public grid: GridComponent;
public data: object[];
public datas: object[];
public args: any;
public getdata(args: any): object[] {
return this.data.filter((e: any)=> e.EmployeeID === args.EmployeeID);
}
ngOnInit(): void {
this.data = hierarchyOrderdata;
this.datas = data;
}
ngAfterViewInit() {
debugger;
console.log(this.compInsideTemplate);
}
}Но я пробовал, как показано ниже, это работает, но я не могу точно взять экземпляр mycomponent
Пример — https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-w9aqmh?file=app.component.ts
app.component.ts:
export class AppComponent {
@ViewChild('check', {static: false})
private detailgrid: TemplateRef<any>;
@ViewChildren('check') detailgrid1: QueryList<any>;
@ViewChild('grid', {static: true})
public grid: GridComponent;
public data: object[];
public datas: object[];
public args: any;
public getdata(args: any): object[] {
return this.data.filter((e: any)=> e.EmployeeID === args.EmployeeID);
}
ngOnInit(): void {
this.data = hierarchyOrderdata;
this.datas = data;
}
ngAfterViewInit() {
debugger;
console.log(this.detailgrid);
console.log(this.detailgrid1);
}
}Нужно помочь решить этот сценарий ........!
