html - 使用 ngModelChange 更改样式

Question

我想知道是否可以使用 ngModelChange 来设置元素的样式。我尝试了以下但不起作用

<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? [style.border-color]='#ff4d4d' : [style.border-color]='#dbdbdb'" type="number">

我知道我可以做类似的事情

<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? error=true : error=false" type="number" [style.border-color]="error ? '#ff4d4d' : '#dbdbdb'">

但我想尽可能删除“错误”属性，并根据条件直接将样式分配给输入

Answer 1

除了处理 ngModelChange，您可以使用普通样式绑定(bind) counter 的条件，它与 $event 具有相同的值ngModelChange 的参数:

<input [(ngModel)]="counter" [style.border-color]="counter > 2 ? '#ff4d4d' : '#dbdbdb'" class="input" type="number">

参见 this stackblitz用于演示。