Angular 4中为ngx-datatable列flexGrow编写if-else条件

嘿，我来帮你搞定这个动态调整flexGrow的需求！其实核心就是利用Angular的属性绑定，结合你的选中状态来动态切换第二列的flexGrow值。下面是具体的实现步骤：

首先，确保你的组件类里有一个用来跟踪选中公司的变量，以及处理选中事件的方法：

// 组件类代码
selectedCompany: any; // 替换成你实际的公司数据类型

// 处理公司选中的方法，根据你的实际交互逻辑调整
onCompanySelect(company: any) {
  this.selectedCompany = company;
  // 如果需要切换选中状态（比如点击同一行取消选中），可以加个判断：
  // this.selectedCompany = this.selectedCompany === company ? null : company;
}

然后在模板里，给ngx-datatable的列做动态绑定。重点看第二列的flexGrow属性，用三元表达式来判断：

<ngx-datatable 
  *ngIf="companies && companies.length" 
  class="material" 
  [scrollbarH]="true" 
  [rows]="companies" 
  [externalPaging]="..."
  [columnMode]="'flex'"
  <!-- 这里绑定行选中事件，如果你是点击单元格触发，就把事件移到单元格模板里 -->
  (select)="onCompanySelect($event.row)"
>
  <!-- 第一列：公司名称 -->
  <ngx-datatable-column 
    name="公司名称"
    [flexGrow]="1"
  >
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.companyName }}
    </ng-template>
  </ngx-datatable-column>

  <!-- 第二列：总公司信息 - 动态调整flexGrow -->
  <ngx-datatable-column 
    name="总公司信息"
    <!-- 关键：根据是否有选中公司切换flexGrow值 -->
    [flexGrow]="selectedCompany ? 2 : 1"
  >
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{ row.parentCompanyInfo }}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

关键点说明： #

• 动态绑定逻辑：[flexGrow]="selectedCompany ? 2 : 1" 这个三元表达式会自动根据selectedCompany的状态切换值——当有选中项时，第二列占比变成2，否则回到1。
• 事件绑定：我这里用了ngx-datatable自带的select事件来处理行选中，如果你是通过点击单元格里的特定元素触发选中，只需要把(click)="onCompanySelect(row)"放到单元格模板里对应的元素上就行，核心的flexGrow绑定逻辑不变。
• 布局兼容性：因为你已经把columnMode设为flex了，这种动态调整会自动适配flex布局的规则，第一列保持1的占比，第二列根据状态变化，整体表格宽度会自动分配。

如果需要实现“点击同一行取消选中”的逻辑，只需要修改onCompanySelect方法：

onCompanySelect(company: any) {
  this.selectedCompany = this.selectedCompany === company ? null : company;
}

这样就完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者TechoTek