PrimeNg使用模板更改p列寬度

Question

嘗試設置動態列寬時出現跟隨錯誤 錯誤：無法找到不同的支持對象'{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\'}' 
 
    }

Answer 1

試着改變你的風格的定義和周圍添加一個單引號「寬度」 這樣的：

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

Answer 2

解決方案是定義爲myStyle的對象，而不是字符串。 否則，即使你沒有得到不同的錯誤，但寬度不會被設置。

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