PrimeNg使用模板更改p列宽度

时间:2017-07-02 20:24:13

标签: primeng primeng-datatable

尝试设置动态列宽时出现以下错误 错误错误:无法找到不同的支持对象&#39; {width:&#39; 180px&#39;,&#39; text-align&#39;:&#39; center&#39;}&#39; < / p>

&#13;
&#13;
  <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>
&#13;
&#13;
&#13;

userColumns定义为

&#13;
&#13;
 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\'}'
    }
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

尝试更改样式的定义,并在“width”周围添加单引号 像这样:

 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\'}'
    }

答案 1 :(得分:0)

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

&#13;
&#13;
 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'}
    }
&#13;
&#13;
&#13;