2

尝试设置动态列宽时出现以下错误错误错误：找不到不同的支持对象'{width：'180px'，'text-align'：'center'}'

  <p-dataTable [value]="employees">
      <p-header>Employee List</p-header>
      <p-column *ngFor="let userColumn of userColumns" 
        [field]="userColumn.field"          [header]="userColumn.title" 
        [sortable]="userColumn.sort" [style]="userColumn.myStyle">
        </p-column>
  </p-dataTable>

userColumns 定义为

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
      'myStyle' : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      'myStyle': '{width: \'180px\', \'text-align\': \'center\'}'
    }

4

3 回答 3

0

解决方案是将 myStyle 定义为 Object 而不是字符串。否则即使你没有得到不同的错误但不会设置宽度。

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
       myStyle : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      myStyle: {width: '180px', 'text-align': 'center'}
    }

于 2017-07-13T15:39:45.810 回答
0

在primeng 12中，他们删除了colgroup模板，因此如果您在应用程序上使用colgroup，则需要删除，因为如果您使用可滚动检查迁移指南，自定义宽度不适用于列。

链接：https ://github.com/primefaces/primeng/wiki/Migration-Guide

解决方案：如果您使用动态列，则需要为<th [style]="'width':'100px'"> 和 <td [style]="'width':'100px'">标签添加相同的宽度然后再添加一个属性宽度，如下所示

[{ header: "Name", field: "name", width: '100px' }] // 列对象数组对象

<p-table [value]="data" [columns]="ColumnObjectArray">   
<ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns; let idx=index;" class="" 
                           [style]="'width':col.width">{{col.header}}</th>
               </tr>
</ng-template>
<ng-template pTemplate="body" let-data let-columns="columns">
                <tr>
                    <td *ngFor="let col of columns" [style]="'width':col.width">
                       {{data[col.field]}}
                    </td>
                </tr>
</ng-template>
</p-table>

试试这个，你肯定会得到表格的响应宽度，你也会得到自定义的列和标题宽度 希望这对你有用

于 2022-01-28T12:11:42.787 回答
0

尝试更改样式的定义并在“宽度”周围添加一个单引号，如下所示：

 this.userColumns = [
    { 
      'field': 'userId', 
      'title': 'User Id',
      'sort': 'true',
      'template': '',
      'myStyle' : ''
    },
    { 'field': 'jobTitleName', 'title': 'Job title', 'sort': 'true','myStyle': ''},
    { 'field': 'lastName',  'title': 'Last name','sort': 'true', 'myStyle': ''},
    { 'field': 'preferredFullName',  'title': 'First name','sort': 'true', 'myStyle': ''},
    { 'field': 'dateOfJoining',  'title': 'Date of Joining','sort': 'true',
      'myStyle': '{\'width\': \'180px\', \'text-align\': \'center\'}'
    }
于 2017-07-04T20:35:28.137 回答