Question

我想使用[style]为我的列的每一列应用不同的宽度，如示例所示，我尝试了[style]="{'width.px':'column.length + 10'}"但是column.length不是在模板上工作，在示例下面我的模板

<p-column *ngFor="let column of columns"
        [field]="column"
        [header]="label[column] ? label[column] : column"
        [style]="{'width.px':'column.length + 10'}"></p-column>

提前感谢。

Answer 1

尝试：

 [style]="{'width': column.length + 'px'}"

Answer 2

我认为在模板中进行大量评估通常不是一个好主意：

在您的组件中，您可以映射列并在那里进行计算，假设列和对象数组。您可以映射并添加新属性columnWidth，从而进行评估。

//assuming you have an array of objects.
    var columns = [
      {
      id : 1},
      {id: 2},
      {id :3}
    ];


        var columnWithExtraProperty = columns.map( (column : any) => {
          return{
            ...column,
            columnWidth : column.length  + 10 + 'px'
          }

        });

       // console.log(columnWithExtraProperty);

然后在模板中尝试：

<p-column *ngFor="let column of columnWithExtraProperty"
        [field]="column"
        [header]="label[column] ? label[column] : column"
        [style]="{'width.px':column.columnWidth}"></p-column>

Answer 3

我发现这个解决方案并不完美，但对我来说，它解决了这个问题：

[style]="{'width.px': +(column.length)+20}"

＆＃39; +＆＃39; sign是否可以将值转换为数字（我尝试将数字（列）放在这里没有工作） - 这很奇怪。我认为这种情况正在发生，因为column.length假设是一个数字，我为文本边缘添加了20 px。

将自定义宽度应用于角度为html模板的prime-ng p列

3 个答案: