几秒钟后如何更改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 定义为背景颜色：

color1: string = '#fb8857';

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

并直接用数据绑定设置值（无需参考模板中的this）：

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

您可以在this stackblitz 中查看此代码。

Answer 2

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

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

这会起作用。

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

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

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

或者什么是一样的：

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

Working Stackblitz demo。