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

Z时代
2024-01-10
分类：问答

通常，当我为每列使用单独的kendo-grid-column标记时，我可以很容易地给出[width]和ng模板用于任何特定列如何使用ngFor kendo grid angular 2为特定列提供宽度和ng模板？以一个例子从剑术文档在https://www.telerik.com/kendo-angular-ui/components/grid/columns/使用ngFor kendo grid angular 2为特定列赋予宽度和ng模板？

@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' 
    } 
    ]; 
}

在生成列的上述方式，我希望使用纳克模板和宽度以一些特定的列。如果我将它写入kendo-grid-column标记中，它将适用于所有列，但我只希望它用于特定列。我怎样才能做到这一点？

回答：

您也可以使用同样的方法为其他属性 - 只要提供相应的对象宽度属性从列阵列：

<kendo-grid-column 
      *ngFor="let column of columns" 
      field="{{column.field}}" 
      title="{{column.title}}" 
      format="{{column.format}}" 
      filter="{{column.type}}" 
      width="{{column.width}}" 
     ></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' 
    } 
    ];