Angular9中如何动态修改ngx-datatable-column的name属性

你不需要通过重复编写<ngx-datatable-column>并使用*ngIf来实现动态列名，直接通过属性绑定结合逻辑判断就能搞定，代码更简洁且避免冗余。

修正后的代码 #

<ngx-datatable-column
  [cellClass]="'alinha-centralizado-global'"
  [headerClass]="'alinha-centralizado-global'"
  [name]="id === 0 ? ('name1' | translate) : ('name2' | translate)"
  prop="fullName"
  [flexGrow]="2"
> 
  <ng-template let-value="value" ngx-datatable-cell-template>
    <span title="{{ value }}">
      {{ value | fullName }}
    </span>
  </ng-template>
</ngx-datatable-column>

关键说明 #

1. 使用[name]做属性绑定：替代原有的插值语法name="{{...}}"，这是Angular动态绑定属性的标准方式，兼容性和可靠性更强。
2. 逻辑判断动态生成列名：通过三元表达式根据id的值，选择对应的翻译键并结合translate管道生成列名，无需重复定义整个列组件。
3. 原写法的问题：重复定义两个列会造成代码冗余，且如果id是行数据的属性，列定义层面无法直接访问行内属性（列属于全局配置，不属于某一行），需确认id是组件级别的控制变量而非行数据属性。

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