Question

以下代码正常。

rmk

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

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

TS文件：

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

此代码给出了如下错误。为什么？

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'

Answer 1

使用＆＃34; Style binding＆＃34;，我们可以动态设置单一样式，所以我们必须多次编码。

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

要同时设置多个内联样式，我们可以使用＆＃34; NgStyle ＆＃34;指令。

<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接受一个键：值控制对象。对象的每个键都是样式名称;它的价值是适合那种风格的价值。所以在组件中初始化变量。

Ts文件：

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

对于第二个问题，样式将键值对作为输入，因此我们无法分配字符串。我希望这一点很清楚。

Answer 2

最后，这个链接帮助我找到了解决这个问题的确切属性。 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的动态绑定问题

2 个答案: