如何在不绑定到 ViewModel 的情况下设置 ngx-datatable 的 columnMode/...？

Question

我开始使用ngx-datatable。

我目前是这样的：

            <ngx-datatable
            #table
            class="material"
            [columns]="columns"
            [headerHeight]="50"
            [footerHeight]="50"
            rowHeight="auto"
            [limit]="10"
            [rows]="testService.tests$ |async"
            [columnMode]="'force'"
            [selected]="selected"
          >
          </ngx-datatable>

但 angular 对columnMode 不太满意：Type '"force"' is not assignable to type 'ColumnMode'。

我一直在检查 ngx-datatable 的示例，它们实际上似乎绑定到 ColumnMode.force。

我看到我可以在我的组件 viewModel( import { ColumnMode } from '@swimlane/ngx-datatable';) 中导入它，但这意味着在这里声明一个属性只是为了能够绑定到 ngx-datatable。

有没有办法直接在模板中引用或指定columnMode？​​p>

Answer 1

您可以为您的<ngx-datatable> 元素应用columnMode="force"。

<ngx-datatable 
  columnMode="force"
  ...
>
</ngx-datatable>

Sample Demo on StackBlitz

---

1.0 根据ngx-datatable DataTableComponent (Line 186)：

@Input() columnMode: ColumnMode | keyof typeof ColumnMode = ColumnMode.standard;

可以使用string 值传递columnMode。

关于一个枚举的keyoftypeof的详细解释可以参考@Yogesh's answer on What does "keyof typeof" mean in TypeScript?

---

2.0 根据Angular - Property Binding docs，

括号 [] 使 Angular 将赋值的右侧作为动态表达式进行计算。如果没有括号，Angular 会将右侧视为字符串文字并将属性设置为该静态值。