从 Nebular NbTreeGridComponent 更改列的宽度答案

【问题标题】：change width of columns from Nebular NbTreeGridComponent从 Nebular NbTreeGridComponent 更改列的宽度
【发布时间】：2020-06-15 04:35:47
【问题描述】：

如何更改 Nebular NbTreeGridComponent 的列宽？在文档中，他们提到了equalColumnsWidth，默认值为“false”。但是，无论我做什么，我的列都保持相同的宽度..

这是我的代码 html：

<table [nbTreeGrid]="source" style="font-family: exo; font-size: 12px;">
    <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
        <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

        <ng-container [nbTreeGridColumnDef]="customColumn">
          <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{customColumn}}</th>
          <td nbTreeGridCell *nbTreeGridCellDef="let row">

            <nb-tree-grid-row-toggle
              [expanded]="row.expanded"
              *ngIf="row.data.kind === 'dir'">
            </nb-tree-grid-row-toggle>

            {{row.data[customColumn]}}

          </td>
        </ng-container>

        <ng-container *ngFor="let column of defaultColumns" [nbTreeGridColumnDef]="column">
          <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{column}}</th>
          <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
        </ng-container>
      </table>

代码ts：

        customColumn = 'Organisme';
  defaultColumns = [ 'Score', 'Symbool'];
  allColumns = [ this.customColumn, ...this.defaultColumns ];
  source: NbTreeGridDataSource<FSEntry>;
  spinner_active = true;

  public _data: FSEntry[] = [];    
  lijst_maldi : maldi[] = [];

  constructor(public _monitorservice: MonitorService, public http: HttpClient, dataSourceBuilder: NbTreeGridDataSourceBuilder<FSEntry>) {    
    _monitorservice.current_isolid_active.subscribe(x => {
      if (x.orderid != 0){
        this.http.get<maldi[]>("https://test.be/getmaldi?specimenid=" +  x.specimenid + "&seq=" + x.sequentie ).subscribe(data =>
        { 
          this._data = [];
          this.lijst_maldi = data;
          for (let x of data){
            this._data.push({Symbool: x.symbool, Organisme: x.organisme, Score: x.score.substring(0,4) });
            }

            const getters: NbGetters<FSEntry, FSEntry> = {
              dataGetter: (node: FSEntry) => node,
              childrenGetter: (node: FSEntry) => node.childEntries || undefined,
              expandedGetter: (node: FSEntry) => !!node.expanded,
            };
            this.source = dataSourceBuilder.create(this._data, getters);

        });
      }

【问题讨论】：

标签： angular width nebular

【解决方案1】：

尝试将 table-layout CSS 属性设置为 auto：

<table [nbTreeGrid]="source" style="table-layout: auto;">

【讨论】：

【解决方案2】：

这不会影响所有用例，但是如果您想更改具有相同宽度的多个列的宽度，您可以在自定义列的表头 (

) 中使用 style="width: 200px"，如下例所示

<table [nbTreeGrid]="source" style="font-family: exo; font-size: 12px;">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
    <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

    <ng-container [nbTreeGridColumnDef]="customColumn">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef style="width: 200px">{{customColumn}}</th>
      <td nbTreeGridCell *nbTreeGridCellDef="let row">

        <nb-tree-grid-row-toggle
          [expanded]="row.expanded"
          *ngIf="row.data.kind === 'dir'">
        </nb-tree-grid-row-toggle>

        {{row.data[customColumn]}}

      </td>
    </ng-container>

    <ng-container *ngFor="let column of defaultColumns" [nbTreeGridColumnDef]="column">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{column}}</th>
      <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
    </ng-container>
  </table>

不要忘记在 .ts 文件的 customColumn 属性中添加需要更改宽度的列

【讨论】：