Question

在我目前的Ionic（4）项目中，我面临一种奇怪的效果。这是我的（简化的）任务：

我有一个建模为简单表格的标签矩阵。我正在侦听KeyEvent，如果按下向右箭头键，我想更改单元格的类以使背景变为绿色（将单元格标记为活动状态）。

这是我的代码：

document.addEventListener('keyup', key => {
    this.keydown(key as KeyboardEvent);
});

...

private keydown(keyEvent: KeyboardEvent) {
    if (keyEvent.key === 'ArrowRight') {
        this.handleKeyRight();
    }
}

...

private handleKeyRight() {
    if (/* some conditions */) {
        this.editing.SizeType.ViewMatrix.map(vRow => {
            const col = vRow.indexOf(this.editing.Size);
            if (col > -1) {
                if (col < 8) {
                    this.editing.Size = vRow[col + 1];
                    return;
                }
            }
        });
    }
}

现在让我们进入模板：

<ion-label text-center class="input-label"
    [class.input-label-editing]="editing.Member === member &&
                                 editing.SizeType === sizeType &&
                                 editing.Size === size">
    stuff to show
</ion-label>

最后但并非最不重要的SCSS：

.input-label {
  border-style: inset;
  border-radius: 1px;
}

.input-label-editing {
  border-style: inset;
  border-radius: 1px;
  background: green;
}

不要问为什么我希望标签看起来像输入，这不是问题。来了：

按向右箭头键时，所有代码均正确执行。该行中的下一个单元格在代码中被标记为活动的，但是模板中的可见类保持不变。但是：只要在应用程序中的某个位置单击鼠标，更改的类就会变得可见，下一个单元格将变为绿色。

我曾尝试按照某些帖子的建议将“ keyup”更改为“ keydown”，但没有任何反应。有什么想法吗？

Answer 1

这与更改检测有关。

通过使用document.addEventListener，您可以在Angular上下文之外进行编码。当您单击时，Angular然后执行更改检测，并发现他有事要做。

您可以通过将更改检测策略设置为“推送”来验证此语句：即使单击，该单元也不会变为绿色。

要解决此问题，您可以使用ngZone.run（我不建议），或将您的侦听器绑定到您的组件（我建议）：

@HostListener('window:keydown', ['$event'])
keydown(keyEvent: KeyboardEvent) { ... }

KeyEvent不会更改模板

1 个答案: