Question

我想在Angular 2中动态分配th中的样式。

我尝试了以下内容：

<th [ngStyle]="{'width:25%': col.field != 'email'}"
    *ngFor="let col of cols"
    [pSortableColumn]="col.field">
        {{col.header}}
</th>

但上述失败。

我应该如何分配样式属性？

Answer 1

你做错了。正确的方法是：

<th [ngStyle]="{'width': col.field != 'email' ? '25%': auto}"
        *ngFor="let col of cols"
        [pSortableColumn]="col.field"
>
  {{col.header}}
</th>

Answer 2

您滥用[ngStyle]指令。它不像[ngClass]指令那样工作（根据条件添加或删除css类）。它为元素CSSStyleDeclaration属性赋予了某种风格，所以你应该在你的例子中以这样的方式管理动态样式：

<th *ngFor ="let col of cols" [ngStyle]="{'width': col.field != 'email' ? '25%': 'auto'}"> // etc

看起来，我使用三元运算符动态分配样式。你也可以这样做：

<th *ngFor ="let col of cols" [style.width]="col.field != 'email' ? '25%': 'auto'"> // etc

这显然更短。而且，顺便说一句，*ngFor作为属性应该在你使用迭代变量之前在同一元素（*ngFor和[ngStyle]上使用其他属性/指令之前，因为你使用在col指令内的*ngFor中声明的[ngStyle]变量，而不是相反的方式）

Angular2动态分配样式

2 个答案: