keyup.enter 上的 Angular 5 错误答案

【问题标题】：Angular 5 error on keyup.enterkeyup.enter 上的 Angular 5 错误
【发布时间】：2018-06-28 13:09:16
【问题描述】：

我正在从 angular 4.4 升级到 5.2

应用程序运行正常，但在一个屏幕上出现错误

TableComponent.html:27 错误类型错误：无法读取 null 的属性“onAndCancel” 在平台浏览器.es5.js:3251 在 ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392) 在 Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142) 在 NgZone.webpackJsonp.../../../core/esm5/core.js.NgZone.runOutsideAngular (core.js:4708) 在 KeyEventsPlugin.webpackJsonp.../../../../ng2-notify-popup/node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.KeyEventsPlugin.addEventListener（平台浏览器.es5.js:3250) 在 EventManager.webpackJsonp.../../../../ng2-notify-popup/node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.EventManager.addEventListener（平台浏览器.es5.js:2395) 在 EmulatedEncapsulationDomRenderer2.webpackJsonp.../../../../ng2-notify-popup/node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.listen (platform-browser .es5.js:2914) 在 BaseAnimationRenderer.webpackJsonp.../../../../ng2-notify-popup/node_modules/@angular/platform-browser/@angular/platform-browser/animations.es5.js.BaseAnimationRenderer.listen（动画.es5.js:491) 在 DebugRenderer2.webpackJsonp.../../../core/esm5/core.js.DebugRenderer2.listen (core.js:15475) 在listenToElementOutputs (core.js:10618)

我将错误跟踪到一行代码

<tr *ngFor="let row of data; let rowIndex = index"
      ...
      (keyup.enter)="onRowAction(row)"

如果我将其更改为 (keyup)，则错误消失并且应用程序按预期工作（但它由任何键触发的功能）

关于绑定到单个键的角度是否发生了变化？

【问题讨论】：

可以把onRowAction(row)下的代码粘贴一下
Max 在下面的建议可以完成这项工作，但(keyup.enter) 应该可以工作并且是一个更好的解决方案，因为它避免了所有这些额外的事件触发器。我建议您尝试在 plunkr 示例中复制此行为 - 这可能是您发现了一个错误。

标签： angular angular5

【解决方案1】：

我会使用 (keyup)="onRowAction(row, $event)" 然后检查是否在 onRowAction() 中按下了正确的键。

onRowAction(row: any, event: KeyboardEvent) {
    if (event.keyCode === 13) {
        // Do stuffz.
    }
}

【讨论】：

【解决方案2】：

我有兴趣对此进行测试，因此这里有两个使用 Angular 5.2 的 plunk，它们对此进行了测试：

(keyup.enter) 在重复 <tr> 内的输入元素上 https://plnkr.co/edit/iTbp4oGD4gNb4IVloewF?p=preview
(keyup.enter) 在重复的<tr> 上，仍然会为子 DOM 元素触发 https://plnkr.co/edit/1AICpyAH4NlXTG9M88zC?p=preview

所以回答这个问题：不，它没有改变并且仍然有效。您遇到的问题必须特定于您的代码。

【讨论】：