Question

我有循环运行假设5次。所以将创建五个带有清除按钮的文本框。

<div *ngFor="let i of array">
  <input id="textFilter" mdInput [ngModel]="searchQuery" value="searchQuery">
    <button>Clear</button>
</div>

单击“清除”按钮，我想单独清除每个文本框。任何帮助将不胜感激。

Answer 1

请参阅更新后的代码

 <div *ngFor="let i of array">
      <input id="textFilter" mdInput [ngModel]="searchQuery" value="searchQuery">
        <button (click)="searchQuery = ''">Clear</button>
    </div>

Answer 2

你可以这样做

在HTML中：

<input id="textFilter" type="text"  [(ngModel)]="searchQuery" value="searchQuery">
<button (click)="clear()">Clear</button>

在JS中：

clear(){
    this.searchQuery = "";
}

不要忘记导入FormsModule

Plunker here

修改

<div *ngFor="let i of array;let index = index;"> <input id="textFilter" mdInput [(ngModel)]="searchQuery[index]" value="searchQuery"> <button (click)=clear(index)>Clear</button> </div>

在JS中：

clear(index){ this.searchQuery[index] = ""; }

更新了Plunker Here

Answer 3

试试这个（更新）

'<div *ngFor="let i of array; let j = index">
    <input [id]="'textFilter'+j" mdInput [ngModel]="searchQuery" value="searchQuery">
    <button (click)="document.getElementById('textFilter"+j+"').reset()">Clear</button>
</div>'

Answer 4

尝试将ngModel值设置为searchQuery的属性，并使用该属性清除每个searchQuery值。

<div *ngFor="let i of array;let index = index;">
  <input id="textFilter" mdInput [(ngModel)]="searchQuery[index]" 
value="searchQuery">
    <button (click)=clear(index)>Clear</button>
</div>

Answer 5

我同意@jusMalcom。我只是在.ts上推断

    export class A {
private searchQuery: string[] = new Array();

constructor() {}

clear(idx: any) {
 this.searchQuery[idx] = '';
}
}

希望有所帮助。阿什利

Answer 6

不确定为什么没有人提到这个但是：

<div *ngFor="let i of array">
    <input id="textFilter" mdInput [ngModel]="i.searchQuery" value="i.searchQuery">
    <button (click)="i.searchQuery=''">Clear</button>
</div>

是最简单，最有效的方式来执行您要求的操作，只要它不会影响其余代码，就可以为数组中的对象添加其他参数。

如果它影响代码中的其他内容，那么使用@JusMalcolm答案是最佳解决方案。

为了拥有一个＆＃34; searchQuery＆＃34;对于数组中的每个项目，您需要在某处存储相同数量的searchQueries。将它与物品一起存放要简单得多，但将它分开存放在第二个阵列中也非常简单。

如何清除angular2中的文本框

6 个答案: