0

我对角度有疑问ng-template。我在里面使用了 mycomponentng-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);
  }
 }

需要帮助解决这种情况........！

4

0 回答 0