Question

如何在不设置全新属性的情况下将属性添加到现有的 ngStyle 属性？

目前，我通过设置[{style.float]找到了一种解决方法，但将来我想做一些类似我发布的代码的事情。

我尝试过：

obj.style = obj.style + { float: 'right' }

我搜索了多个搜索短语。我越来越认为这是不可能的。


obj.style: { color: 'red' }

< .... [ngStyle]="obj.style"...>


public ButtonClickAddFloating(obj) {

// Target: obj.style: { color: 'red', float: 'right' }

}


public ButtonClickRemoveFloating(obj) {

// Target: obj.style: { color: 'red' }

}

Answer 1

使用spread syntax

this.ngStyle = { ...this.ngStyle, fontFamily: 'Roboto' };

请注意，此语法不会从对象中删除以前的样式。如果要删除它，请重新分配它，或将值设置为undefined。

您还可以对对象进行解构以删除属性：

{ fontFamily, ...rest } = this.ngStyle;
this.ngStyle = rest;

Answer 2

您可以使用object spread syntax或Object.assign()

const obj = {style: {color: 'red'}}
obj.style = {...obj.style, float: 'right' }
obj.style = Object.assign({}, obj.style, {color: 'blue'})
console.log(obj)

无论如何，这可能不会继续添加在ngStyle AFAIK范围之外的样式

Answer 3

public objStyle: any = {'background-color': 'red'};

public addFloat(): void {
  this.objStyle = Object.assign({ 'float': 'right' }, this.objStyle);
}

public removeFloat(): void {
  delete this.objStyle['float'];
}

和html：

<p [ngStyle]="objStyle">
  Start editing to see some magic happen :)
</p>
<button (click)="addFloat()">Add float</button>
<button (click)="removeFloat()">Remove float</button>

Answer 4

您可以使用delete从对象示例中删除属性

 var obj={style:{color:'red', float: 'right'}}

console.log('Before delete',obj)

delete obj.style.float   //remove peroperty here

console.log('after delete',obj)

obj.style['float']='left';  //set float property again here

console.log('Added float property again',obj)

如何在ngStyle中添加和删除单个属性？

4 个答案: