角度和定调的动态绑定问题

问题描述

以下代码可以正常工作.

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

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'

为什么不这样?

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

推荐答案

最后，此链接帮助我找到了解决此问题的确切属性. https://github.com/primefaces/primeng/issues/1405

Finally this link helped me to find out the exact attribute to solve this.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>

这篇关于角度和定调的动态绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！