Question

下面是我的输入字段，我在这个输入表单中有一个带有背景图像cross（x）的类（form - cross）。我想隐藏/显示基于Keypress的十字图标（Class =＆＃34; form - cross＆＃34;）但我不知道如何在angular4中执行此操作。

＆＃13;

<div class="form">
  <input [(ngModel)]="templateSearch" type="text" id="search" placeholder="search" class="form--cross" autofocus>
  <button class="btn" (click)="search()"></button>
</div>

＆＃13;

Answer 1

在.ts中声明一个变量，然后使用ngClass添加/更改类，它将变量作为值和类名作为键：

在 component.ts

中

showIcon = true;

在 component.html

中

  <input 
     [(ngModel)]="templateSearch"
     type="text" 
     id="search" 
     placeholder="search" 
     (change)="showIcon=false"
     ngClass="{
       'form--cross': showIcon
     }" 
     autofocus
  >

Answer 2

你需要在输入中听取keyup或input事件，并以那种方式绑定你的ngClass [ngClass] =“{'form - cross'：isWriting}”

 <input [(ngModel)]="templateSearch" (input)="onKey($event)" type="text" id="search" placeholder="search" [ngClass]="{'form--cross': isWriting}"  autofocus  >

 onKey(event) {
   this.isWriting = true;
 }

Answer 3

在您的模板（HTML）中：

<div class="form">
    <input #searchInput [(ngModel)]="templateSearch" type="text" id="search" placeholder="search"
        [class.form--cross]="searchInput.value.length == 0" autofocus>
    <button class="btn" (click)="search()"></button>
</div>

如果你想在输入失去焦点时隐藏交叉（隐藏类），那就是另一种问题了。

如果你想在点击十字架时清除输入，这有点困难，因为你使用CSS来显示十字架。

如果您想使用评论中链接的完全相同的十字，您可以使用type="search"作为输入。

如何在角度4

3 个答案: