Angular slickgrid 未在动态选项卡中显示(ngx-bootstrap 选项卡集)
Angular slickgrid not displaying inside dynamic tab(ngx-bootstrap tabset)
我正在使用 Angular Slickgrid 在选项卡内显示 table 数据。
我有一个 html 页面,其中两个选项卡是静态的,也正确显示数据,其他选项卡是从末尾的专用选项卡动态创建的,这基本上是根据输入构建查询,当您保存选项卡时,它将创建一个新选项卡,将其附加在第二个选项卡之后,并将查询发送到新生成的选项卡,该选项卡将使用给定查询从服务中获取记录。我成功地从服务中获取数据,但 table 没有显示任何内容,甚至没有 table 标题。
这是代码:
Parent 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 -->
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>
Child component:
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 标记。相反,您可以每次从 parent 组件传递一个唯一的 ID 作为 angular 输入。
最后,您的 child 和 parent html 的片段如下所示。
Parent html:
<child-component [id]="id" [query]="query"></child-component>
Child html:
<angular-slickgrid [gridId]="id" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
[dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
编码愉快。
我正在使用 Angular Slickgrid 在选项卡内显示 table 数据。 我有一个 html 页面,其中两个选项卡是静态的,也正确显示数据,其他选项卡是从末尾的专用选项卡动态创建的,这基本上是根据输入构建查询,当您保存选项卡时,它将创建一个新选项卡,将其附加在第二个选项卡之后,并将查询发送到新生成的选项卡,该选项卡将使用给定查询从服务中获取记录。我成功地从服务中获取数据,但 table 没有显示任何内容,甚至没有 table 标题。 这是代码:
Parent 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 -->
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>
Child component:
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 标记。相反,您可以每次从 parent 组件传递一个唯一的 ID 作为 angular 输入。
最后,您的 child 和 parent html 的片段如下所示。
Parent html:
<child-component [id]="id" [query]="query"></child-component>
Child html:
<angular-slickgrid [gridId]="id" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
[dataset]="responseList" (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
编码愉快。