态
我想在几秒钟后更改DIV的背景色。我使用 settimeout 属性。但它行不通。
html代码
<div [style.background-color]="this.color1 == 'true' ? '#fb8857' : '#ffffff'">
</div>
TS代码
color1 = true;
ngOnInit() {
setTimeout(()=>{
this.color1=false;
},5000);
}
您需要将color1属性与布尔值进行比较，例如：
<div [style.background-color]="this.color1 === true ? '#fb8857' : '#ffffff'"></div>
或什么是相同的：
<div [style.background-color]="this.color1 ? '#fb8857' : '#ffffff'"></div>
工作Stackblitz demo 。
您可以将color1定义为背景颜色：
color1: string = '#fb8857';
ngOnInit() {
setTimeout(() => {
this.color1 = '#ffffff';
}, 5000);
}
并将值直接设置为数据绑定（无需参考模板中的this）：
<div [style.background-color]="color1">
</div>
您可以在中看到此代码> 。
export const buttonStateTrigger = trigger('buttonState', [
state('valid', style({
backgroundColor: 'lightgreen',
borderColor: 'green',
color: 'green'
})),
state('invalid', style({
backgroundColor: 'red',
borderColor: 'darkred',
color: 'white'
})),
transition('invalid => valid', [
group([
animate(100, style({
transform : 'scale(1.1)'
})),
animate(200, style({
backgroundColor: 'lightgreen'
})),
animate(200, style({
transform : 'scale(1)'
})),
])
]),
transition('valid => invalid', [
group([
animate(100, style({
transform : 'scale(1.1)'
})),
animate(200, style({
backgroundColor: 'red'
})),
animate(200, style({
transform : 'scale(1)'
})),
])
])
]);
您需要导入之类的欲望组件
animations: [
buttonStateTrigger
]
html
<button
type="submit"
[disabled]="!f.valid"
[@buttonState]="f.valid ? 'valid' : 'invalid' "
class="btn btn-success">Create Project</button>
`**请启用角动画**您可以关注我的项目https://github.com/shahinalkabirmitul/angularstyling
删除在div标签'true'
中使用的报价<div [style.background-color]="this.color1 ? '#fb8857' : '#ffffff'"> </div>
这将起作用。