Angular4_清空input输入框

来源：互联网发布：樟脑丸蟑螂知乎编辑：程序博客网时间：2024/06/05 16:54

Method 1.

Using `ngModel`.

@Component({  selector: 'my-app',  template: `    <div>      <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">      <button (click)="clearSearch()">Clear</button>    </div>  `,})export class App {  searchValue:string = '';  clearSearch() {    this.searchValue = null;  }}

Plunker code: Plunker1

Method 2.

Using null value instead of empty quotation marks.

@Component({  selector: 'my-app',  template: `    <div>      <input type="text" placeholder="Search..." [value]="searchValue">      <button (click)="clearSearch()">Clear</button>    </div>  `,})export class App {  searchValue:string = '';  clearSearch() {    this.searchValue = null;  }}

Plunker code: Plunker2

Method 1.

Using `ngModel`.

@Component({  selector: 'my-app',  template: `    <div>      <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">      <button (click)="clearSearch()">Clear</button>    </div>  `,})export class App {  searchValue:string = '';  clearSearch() {    this.searchValue = null;  }}

Plunker code: Plunker1

Method 2.

Using null value instead of empty quotation marks.

@Component({  selector: 'my-app',  template: `    <div>      <input type="text" placeholder="Search..." [value]="searchValue">      <button (click)="clearSearch()">Clear</button>    </div>  `,})export class App {  searchValue:string = '';  clearSearch() {    this.searchValue = null;  }}

Plunker code: Plunker2

阅读全文

0 0