如何在几秒钟后更改div的背景颜色？

Question

我想在几秒钟后更改div的背景颜色。我使用了 setTimeout 属性。但它不起作用。

HTML代码

<div [style.background-color]="this.color1 == 'true' ? '#fb8857' : '#ffffff'">
</div>

TS代码

color1 = true;

 ngOnInit() {
    setTimeout(()=>{
      this.color1=false;
    },5000);
}

Answer 1

您需要将color1属性与布尔值进行比较，如下所示：

<div [style.background-color]="this.color1 === true ? '#fb8857' : '#ffffff'"></div>

或者会是什么相同：

<div [style.background-color]="this.color1 ? '#fb8857' : '#ffffff'"></div>

的 Working Stackblitz demo

Answer 2

您可以将color1定义为背景颜色：

color1: string = '#fb8857';

ngOnInit() {
    setTimeout(() => {
        this.color1 = '#ffffff';
    }, 5000);
}

直接使用数据绑定设置值（无需在模板中引用this）：

<div [style.background-color]="color1">
</div>

您可以在this stackblitz中看到此代码正常工作。

Answer 3

您可以使用角色动画轻松完成此操作，例如

 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

Answer 4

删除div标签中使用的引用'true'

<div [style.background-color]="this.color1 ? '#fb8857' : '#ffffff'"> </div>

这样可行。