Dynamic binding issue with angular and primeng

问题:

The following code works fine.

<p-column *ngFor="let col of detailsModel.columnDefs"
              [field]="col.field"
              [header]="col.headerName"
              [style]="{'width':'150px','text-align':'right'}"
              sortable="true">
</p-column>

Now I want to make the style part dynamic. So, if I re-wrote my code like this

<p-column *ngFor="let col of detailsModel.columnDefs"
                  [field]="col.field"
                  [header]="col.headerName"
                  [style]="col.textAlign == 'left' ? alignLeft : alignRight"
                  sortable="true">
</p-column>

TS file:

export class MyComponent implements OnInit {

  alignLeft = "'width':'150px','text-align':'left'";
  alignRight = "'width':'150px','text-align':'right'";

 constructor() {
  }


  ngOnInit() {
 }

}

This code give me error like below. Why?

ERROR Error: Cannot find a differ supporting object ''width':'150px','text-align':'right''
    at KeyValueDiffers.webpackJsonp.../../../core/@angular/core.es5.js.KeyValueDiffers.find (core.es5.js:8051)
    at NgStyle.set [as ngStyle] (common.es5.js:2441)
    at updateProp (core.es5.js:11114)
    at checkAndUpdateDirectiveInline (core.es5.js:10806)
    at checkAndUpdateNodeInline (core.es5.js:12349)
    at checkAndUpdateNode (core.es5.js:12288)
    at debugCheckAndUpdateNode (core.es5.js:13149)
    at debugCheckDirectivesFn (core.es5.js:13090)
    at Object.View_ColumnHeaders_1._co [as updateDirectives] (ColumnHeaders.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)

Another question is why the style needs to be written with quotes on each style type like this?

'width':'150px','text-align':'right'

And why not like this?

"width:150px; text-align:right"

回答1:

Using "Style binding", we can set a single style dynamically,so we have to code it multiple times.

<p-column *ngFor="let col of detailsModel.columnDefs"
                  [field]="col.field"
                  [header]="col.headerName"
                  [style.width]="col.textAlign == 'left' ? alignLeftWidth : alignRightWidth"
                  [style.text-align]="col.textAlign == 'left' ? alignLeftAlign : alignRightAlign"
                  sortable="true">
</p-column>

To set many inline styles at the same time, we can use "NgStyle " directive.

<p-column *ngFor="let col of detailsModel.columnDefs"
                  [field]="col.field"
                  [header]="col.headerName"
                  [ngStyle]="col.textAlign == 'left' ? alignLeft : alignRight"
                  sortable="true">
</p-column>

ngSyles takes a key:value control object. Each key of the object is a style name; its value is whatever is appropriate for that style. so initialise variable in component.

Ts File:

export class MyComponent implements OnInit {

  alignLeft:{};
  alignRight:{};

 constructor() {
     this.alignLeft = {'width':'150px','text-align':'left'};
     this.alignRight = {'width':'150px','text-align':'right'}
  }


  ngOnInit() {
 }

}

Demo:https://plnkr.co/edit/ZfrUX4u70OHZZlw9uBHg

For second question,style takes key-value pair as input, so we can not assign string.I hope this makes clear.

回答2:

Finally this link helped me to find out the exact attribute to solve this. https://github.com/primefaces/primeng/issues/1405

Code:

<p-column *ngFor="let col of detailsModel.columnDefs"
              [field]="col.field"
              [header]="col.headerName"
              [style]="{'width': '150px'}"
              styleClass="{{col.textAlign == 'left' ? 'text-left' : 'text-right'}}"
              sortable="true">
    </p-column>