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

但是我想尽可能删除'error'属性，并根据条件将样式直接分配给输入

Answer 1

您可以使用普通样式绑定和ngModelChange上的条件来使用普通样式绑定，该条件的值与counter的{{1}}参数相同：

$event

有关演示，请参见this stackblitz。

Answer 2

我认为这是不可能的，因为我们无法在事件绑定（ngModelChange）内进行属性绑定[style]，因为一个绑定正在视图中发生而另一个绑定在Model中发生。

Answer 3

您可以通过添加基于函数的方法来清理代码。

HTML

<input class="input" [(ngModel)]="counter" (ngModelChange)="changeColor($event)" type="number" [style.border-color]="color"  type="number">

.TS

color="dbdbdb";
  changeColor(event) {
    if(event > 2){
      this.color = "#ff4d4d";
    }else{
      this.color = "#dbdbdb";
    }
  }

使用ngModelChange更改样式

3 个答案: