Question

我在项目中遇到了这个问题。如果在div中将对象分配给ngStyle，则当对象更改时，ngStyle不会从旧对象中刷新样式属性。

虽然应该刷新所有旧的对象样式，但只应该应用新的对象样式属性。

为了表明这个问题，我已经在ngStyle github page上分配了这个问题。

您可以在此plunkr重现此问题。

  <div [ng-style]="selectedStyle">
 Change style of this text!
</div>


changeFirst(){
 this.selectedStyle = {"border-width": "5px", "border-style": "solid", "border-color": "black"};
}

changeSecond(){
  this.selectedStyle = {"background-color": "red"};
}

在plunkr中，单击第一个样式对象并将应用它，它将为div提供边框。然后单击第二个样式，它将为其提供背景颜色，但也保留前一个样式的边框。

环境 -

Angular版本：2.0.0-alpha.39

语言：TS

Answer 1

这样可行。

changeFirst(){
  this.selectedStyle = {"border":"5px solid black"}; //<----- made change here.
}

changeSecond(){
  this.selectedStyle = {"background-color": "red"};
}

Answer 2

--html

<button md-button *ngFor="let mod of mappedModules;let k= index" [style.font-weight]="modStyle[k]" (click)="moduleButtonClicked(k)">{{ mod.name }}</button>

--ts
moduleButtonClicked(index: any){

    for(var i=0;i<this.modStyle.length;++i){
        if(i==index){
            this.modStyle[i]= 'bold';
        }
        else{
            this.modStyle[i]='normal';
        }
    }

}

当模型对象发生变化时，Angular 2 Ng样式不会删除旧样式

2 个答案: