angular 和 primeng 的动态绑定问题

Question

以下代码工作正常。

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

现在我想让样式部分动态化。所以，如果我像这样重写我的代码

<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 文件：

export class MyComponent implements OnInit {

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

 constructor() {
  }


  ngOnInit() {
 }

}

这段代码给我如下错误。为什么？

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)

另外一个问题是为什么样式需要在每个样式类型上都写上这样的引号？

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

为什么不这样呢？

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

Answer 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 采用 key:value 控制对象。对象的每个键是一个样式名称；它的价值是适合那种风格的任何东西。所以在组件中初始化变量。

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() {
 }

}

演示：https://plnkr.co/edit/ZfrUX4u70OHZZlw9uBHg

对于第二个问题，style以键值对作为输入，所以我们不能赋值string.I希望这能说明问题。

Answer 2

最后这个 link 帮助我找到了解决这个问题的确切属性。 https://github.com/primefaces/primeng/issues/1405

代码：

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

angular 和 primeng 的动态绑定问题

Dynamic binding issue with angular and primeng

angular

primeng