Angular:Trying 使用条件执行 ngSwitch
Angular:Trying to do ngSwitch with Conditions
我有兴趣做 ngswitch 以防万一
数量大于5
所以给它的字体大小 50 px
数字小于2所以给它15px....
我找不到合适的语法,所以这里没有代码
我相信您正在寻找 ngStyle(条件样式)。你可以这样使用它:
[ngStyle]="{
'font-size':
condition
? onTrue
: onFalse
}"
ngSwitch
不是执行此操作的最佳方法,因为 ngSwitch
表达式需要 ngSwitchCase
.
中的匹配项
来自 documentation 的示例:
<container-element [ngSwitch]="switch_expression">
<!-- the same view can be shown in more than one case -->
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<!--default case when there are no matches -->
<some-element *ngSwitchDefault>...</some-element>
</container-element>
因此,在您的情况下,当指令需要 值 时,您试图将 条件 传递给 match_expression
。您可以在 switch_expression
中传递一个简单的条件(例如 number > 5 或 number < 2),但由于您有多个条件,这将不起作用。
你应该换一种方式,最简单的方法是 ngIf
。
如果您只想有条件地应用样式,您还可以使用 ngStyle
或 ngClass
我有兴趣做 ngswitch 以防万一 数量大于5 所以给它的字体大小 50 px
数字小于2所以给它15px....
我找不到合适的语法,所以这里没有代码
我相信您正在寻找 ngStyle(条件样式)。你可以这样使用它:
[ngStyle]="{
'font-size':
condition
? onTrue
: onFalse
}"
ngSwitch
不是执行此操作的最佳方法,因为 ngSwitch
表达式需要 ngSwitchCase
.
来自 documentation 的示例:
<container-element [ngSwitch]="switch_expression">
<!-- the same view can be shown in more than one case -->
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<!--default case when there are no matches -->
<some-element *ngSwitchDefault>...</some-element>
</container-element>
因此,在您的情况下,当指令需要 值 时,您试图将 条件 传递给 match_expression
。您可以在 switch_expression
中传递一个简单的条件(例如 number > 5 或 number < 2),但由于您有多个条件,这将不起作用。
你应该换一种方式,最简单的方法是 ngIf
。
如果您只想有条件地应用样式,您还可以使用 ngStyle
或 ngClass