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

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

标签： htmlcssangulartypescript

Answer 1

代替处理ngModelChange，您可以使用带有条件的普通样式绑定 on ，它与参数的counter值相同：$eventngModelChange

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

请参阅此 stackblitz以获取演示。