Angular slickgrid不显示在动态选项卡中(ngx-bootstrap tabset) [英] Angular slickgrid not displaying inside dynamic tab(ngx-bootstrap tabset)
问题描述
我正在使用Angular Slickgrid在选项卡中显示表数据.我有一个html页面,其中两个选项卡是静态的,也可以正确显示数据,而其他选项卡是从末尾的专用选项卡动态创建的,该选项卡基本上是根据输入构建查询的,当您保存选项卡时,它将创建一个新的选项卡,附加在第二个选项卡之后将其发送给新生成的选项卡,该选项卡将使用给定的查询从服务中获取记录.我从服务中成功获取数据,但是表甚至不显示任何表标题.这是代码:
I am using Angular Slickgrid to display table data inside tabs. I have a html page where two tabs are static also displaying data correctly and other tabs are dynamically created from a dedicated tab at the end which is basically build a query from the inputs and when you save the tab it will create a new tab, append it after the 2nd tab and send the query to the newly generated tab which will fetch record from the service with the given query. I am getting data from the service successfully but the table is not displaying anything not even table heading. Here is the code:
父html:
<tabset #tabsetId>
<tab heading="heading1" id="1" (selectTab)="onSelectTab($event)">
<child-component [query]="query"></child-component>
</tab>
<tab heading="heading2" id="2" (selectTab)="onSelectTab($event)">
<child-component [query]="query"></child-component>
</tab>
<!--below tab is not displaying any data -->
<tab id="3" *ngFor="let tabz of tabs" [heading]="tabz.title" [active]="tabz.active"
(selectTab)="onSelectTab($event)" (deselect)="tabz.active = false" [disabled]="tabz.disabled"
[removable]="tabz.removable" (removed)="removeTabHandler(tabz)">
<child-component [query]="query"></child-component>
</tab>
</tabset>
<!-- Note: Child component is having angular slick grid code -->
子代码html:
Child code html:
<div style="height:auto;width:750px">
<angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
[dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
</div>
子组件:
export class ChildComponent {
@Input() query: Array<any>;
ngOnInit() {
this.columnDefinitions = [
{ col- 1},{ col - 2 }
]
this.gridOptions = {
enableAutoResize: true,
enableCellNavigation: true,
enableFiltering: true,
forceFitColumns: true
}
this.fetchData(this.query);
}
angularGridReady(angularGrid: AngularGridInstance) {
console.log('slickgrid created');
}
private fetchData(query: Array<any>) {
// Clearing response list
this.responseList = [];
this.service.fetchDataByQuery(query).subscribe(responseList => {
this.responseList = responseList;
});
}
}
推荐答案
在child-component.html中,我看到您每次都将相同的gridId传递给angular-slickgrid标签.相反,您可以每次从父组件传递唯一的Id作为角输入.
In your child-component.html, i can see that you are passing same gridId everytime to the angular-slickgrid tag. Instead, you can pass a unique Id each time as a angular input, from your parent component.
最后,您的孩子和父母的html片段如下所示.
Finally, your child and parent htmls snippets looks like below.
父html:
<child-component [id]="id" [query]="query"></child-component>
子html:
<angular-slickgrid [gridId]="id" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
[dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
快乐的编码.
这篇关于Angular slickgrid不显示在动态选项卡中(ngx-bootstrap tabset)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!