Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Typescript 如何使用列模式固定ngx数据表列宽是';力';_Typescript_Bootstrap 4_Angular8_Ngx Datatable_Column Width - Fatal编程技术网

Typescript 如何使用列模式固定ngx数据表列宽是';力';

Typescript 如何使用列模式固定ngx数据表列宽是';力';,typescript,bootstrap-4,angular8,ngx-datatable,column-width,Typescript,Bootstrap 4,Angular8,Ngx Datatable,Column Width,im使用ngx数据表。在这方面,我没有专栏。默认情况下,它的默认值为,而滚动条的默认值大于网格。我尝试使用宽度为的列数组 displayColumns = [ { name: 'S.No', value: 'SNo', width: '10' }, { name: 'Item', value: 'ProductName' , width: '10' }, { name: 'HSN Code', value: 'HCNCode', width: '10' }, { name

im使用ngx数据表。在这方面,我没有专栏。默认情况下,它的默认值为,而滚动条的默认值大于网格。我尝试使用宽度为的列数组

  displayColumns = [
    { name: 'S.No', value: 'SNo', width: '10' }, { name: 'Item', value: 'ProductName' , width: '10'  },
    { name: 'HSN Code', value: 'HCNCode', width: '10'  }, { name: 'GST%', value: 'GSTRate', width: '100'  },
    { name: 'Touch', value: 'PTouch', width: '10'  },
    { name: 'Qty', value: 'Quantity', width: '10'  }, { name: 'MCP Rate', value: 'MCPRate', width: '10'  }, 
    { name: 'MCP Amt', value: 'MCPAmount', width: '10'  },
    { name: 'Weight', value: 'Weight', width: '10'  }, { name: 'MCG Rate', value: 'MCGRate', width: '10'  },
     { name: 'MCG Amt', value: 'MCGAmount', width: '10'  },
    { name: 'Wastage', value: 'STouch', width: '10'  }, { name: 'Purity', value: 'Purity', width: '10'  }, { name: 'Total MC', value: 'TotalMC', width: '10'  },
    { name: 'Gram Rate', value: 'Rate', width: '10'  }, { name: 'Total Amt', value: 'TotalAmount' , width: '10' },
    { name: 'Actions', value: 'Actions' }];
我的桌子是

   <ngx-datatable class="bootstrap" [rows]="roleList" [headerHeight]="80"
                                        [footerHeight]="50" [rowHeight]="'45'" [scrollbarH]="true"
                                        [columnMode]="'force'" [limit]="limit" [loadingIndicator]="loadingIndicator"
                                        [columns]="displayColumns" [reorderable]="reorderable">
                                        <ngx-datatable-column *ngFor="let column of displayColumns"
                                            [name]="column.name">
                                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex"
                                                let-value="value" let-row="row">
                                                <span class="badge fw-default"
                                                    [ngClass]="{'badge-success': row[column.value] === 'Yes', 'badge-danger': row[column.value] === 'No' }"
                                                    *ngIf="column.name !== 'Actions'">{{row[column.value]}}</span>
                                                <span *ngIf="column.name === 'Actions'">
                                                    <button class="btn btn-primary mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Edit" [disabled]=financedisabled
                                                        (click)="edit(row)">
                                                        <i class="ft-edit"></i>
                                                    </button>
                                                    <button class="btn btn-warning mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Delete" [disabled]=financedisabled
                                                        (click)="deleteRow(row)">
                                                        <i class="ft-trash-2"></i>
                                                    </button>
                                                    <button class="btn btn-success mr-1 btn-fab" placement="top"
                                                        ngbTooltip="Permission" [disabled]=financedisabled
                                                        (click)="routeToRolePermission(row)">
                                                        <i class="ft-edit"></i>
                                                    </button>
                                                </span>
                                            </ng-template>
                                        </ngx-datatable-column>
                                    </ngx-datatable>

{{row[column.value]}
数组中指定的列的宽度不取值。我变得像贝娄一样

期待着网格般的咆哮


如图所示,应为带有拖曳山墙标头的网格。。那么,你能说说在这种情况下如何确定列宽吗。我尝试了很多方法都无法解决此问题。

如果我正确理解您的问题,您希望为列设置固定宽度。我会这样做:

<ngx-datatable-column *ngFor="let column of displayColumns" [name]="column.name" [width]="100">
<!-- the rest of your code -->
</ngx-datatable-column>