条件发生变化时，ngStyle无法正确更新视图

Question

我有这个简单的代码：

keyDown = false;

  @HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    this.keyDown = true;
  }

  @HostListener('document:keyup', ['$event'])
  onKeyUp(event: KeyboardEvent) {
    this.keyDown = false;
  }

如果用户在键盘上至少按下了一个键，则只需将keyDown设置为true或false。它已绑定到此html：

    <div class="button"
    [ngStyle]="{'background-color': keyDown ? 'red' : 'trasparent' }">&nbsp;</div>

    <hr>

    Is background filled? {{keyDown}}

.button{
  width:150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid;
}

问题是我第一次按某个键时，背景变为红色，但是如果我松开该键并调用onKeyUp功能，则可以看到更改此处-> Is background filled? {{keyDown}}，但div的background仍然是红色。

我尝试在changeDetectionRef.detectChanges();函数中使用onKeyUp，但是它不起作用。

这里是堆叠闪电战：https://stackblitz.com/edit/angular-iabrxs

有困难吗？

EDIT ：不要建议使用ngClass，因为在主应用程序中，按钮是按照特定配置（定义了自定义颜色）动态生成的。