使用ngFor kendo grid angular 2为特定列提供宽度和ng模板？

Posted 2023-02-19

【中文标题】使用ngFor kendo grid angular 2为特定列提供宽度和ng模板？

【英文标题】：Giving width and ng template for specific columns using ngFor kendo grid angular 2?

【发布时间】：2018-05-09 12:41:16

【问题描述】：

通常，当我为每一列使用单独的 kendo-grid-column 标记时，我可以轻松地为任何特定列提供 [width] 和 ng 模板 如何使用 ngFor kendo grid angular 2 为特定列提供宽度和 ng 模板？以https://www.telerik.com/kendo-angular-ui/components/grid/columns/的剑道文档为例

@Component(
  selector: 'my-app',
  template: `
      <kendo-grid
        [kendoGridBinding]="gridData"
        [filterable]="true"
        scrollable="none"
        >
        <kendo-grid-column
          *ngFor="let column of columns"
          field="column.field"
          title="column.title"
          format="column.format"
          filter="column.type"
        ></kendo-grid-column>
      </kendo-grid>
  `
)
export class AppComponent 
  public gridData: any[] = sampleProducts;

  public columns: ColumnSetting[] = [
    
      field: 'ProductName',
      title: 'Product Name',
      type: 'text'
    , 
      field: 'UnitPrice',
      format: '0:c',
      title: 'Unit Price',
      type: 'numeric'
    , 
      field: 'FirstOrderedOn',
      format: '0:d',
      title: 'First Ordered',
      type: 'date'
    
  ];

在上述生成列的方式中，我希望对某些特定列使用 ng 模板和宽度。如果我将它写在kendo-grid-column 标签内，它将适用于所有列，但我只希望它适用于特定列。我该怎么做？

【问题讨论】：

你试过 [width]="column.field === 'column_name' ? 'desired_width': 'default_witdth'"

【参考方案1】：

您也可以使用与其他属性相同的方法 - 只需在 columns 数组中的各个对象中提供宽度属性：

<kendo-grid-column
          *ngFor="let column of columns"
          field="column.field"
          title="column.title"
          format="column.format"
          filter="column.type"
          
        ></kendo-grid-column>

public columns: ColumnSetting[] = [
    
      field: 'ProductName',
      title: 'Product Name',
      type: 'text'
    , 
      field: 'UnitPrice',
      format: '0:c',
      title: 'Unit Price',
      type: 'numeric',
      width: 300
    , 
      field: 'FirstOrderedOn',
      format: '0:d',
      title: 'First Ordered',
      type: 'date'
    
  ];

UPDATED EXAMPLE

【讨论】：

如何提供 headerClass 之类的属性？我试过了还是不行

headerClass="column.customClass" （其中 customClass 是一个字符串）或 [headerClass]="column.customClass" 似乎都按预期工作：plnkr.co/edit/gtHYPdy0gpBJuP3uI0fR?p=preview 不要如果将在组件级别提供自定义样式，请忘记删除封装。

我会试一试，会告诉你的