PrimeNg modifier la largeur de p-colonne avec le modèle

Question

Je reçois erreur suivante lors de la tentative de définition de la largeur de colonne dynamique ERROR Erreur: Impossible de trouver un objet de support différent '{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 définis comme

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

Essayez de changer la définition de votre style et ajouter une seule citation autour de « largeur » comme ceci:

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

solution est de définir myStyle comme objet plutôt que de chaîne. Sinon, même si vous n'obtenez pas d'erreur différente, la largeur ne sera pas définie.

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