带有 keydown.space 和 keydown.tab 的角三元条件答案

【问题标题】：Angular ternary condition with keydown.space and keydown.tab带有 keydown.space 和 keydown.tab 的角三元条件
【发布时间】：2018-07-31 07:36:16
【问题描述】：

我想要的是检查输入类型是否为特定类型，然后应用检查 keydown.space 和 keydown.tab

我尝试了什么：

 <input (keydown.space)="locationUi.location_type=='video' ? $event.preventDefault() : false" (keydown.tab)="locationUi.location_type=='video' ? $event.preventDefault(): false" id="masked-input" [ngClass]="locationUi.location_type=='video' ? 'width-40':''" (input)="textInput()" type="{{locationUi.extra.field.type}}" name="inputOtherAdress" class="form-control" placeholder="{{locationUi.extra.field.placeholder}}"
            [required]="locationUi.enabled" [value]="locationUi.data" (input)="locationUi.data = $event.target.value">

结果：

这将禁用所有输入字段上的空格和制表符。

【问题讨论】：

标签： angular ternary-operator

【解决方案1】：

您使用的是false，而不是尝试使用null，它应该可以正常工作。

 <input (keydown.space)="locationUi.location_type=='video' ? $event.preventDefault() : null" (keydown.tab)="locationUi.location_type=='video' ? $event.preventDefault(): null" id="masked-input" [ngClass]="locationUi.location_type=='video' ? 'width-40':''" (input)="textInput()" type="{{locationUi.extra.field.type}}" name="inputOtherAdress" class="form-control" placeholder="{{locationUi.extra.field.placeholder}}"
            [required]="locationUi.enabled" [value]="locationUi.data" (input)="locationUi.data = $event.target.value">

此外，更好的解决方案是通过控制器使用它。

【讨论】：

【解决方案2】：

不检查它，如果你在三元中使用true而不是false，它可能会起作用。

但是，无论如何，这应该在控制器中更好地处理。对于模板来说，这已经是相当多的逻辑了，这让整个事情变得非常难以阅读。

public onSpace(event: Event) {
  if (this.locationUi.location_type === "video") {
    event.preventDefault();
  }
}

和

<input (keydown.space)="onSpace($event)" … />

【讨论】：