如何清除angular2中的文本框

我有循环运行假设5次。因此会创建五个带清除按钮的文本框。如何清除angular2中的文本框

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

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

来源

2017-07-12 dsnr

尝试： –

您的输入值是否在数组内？ – Giovane

值得注意的是，你有一个ngFor，但是你不直接访问你输入内的那些项目。清除此问题将与Lalit Sachdeva为答案所写的内容一样简单，但这不足以在组件中分别访问这些项目。 –

请参阅更新的代码

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

来源

2017-07-12 14:22:51

你可以这样做

在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

来源

2017-07-12 14:23:27 SaiUnique

一切都变得清晰。我想单独清除它们。 – dsnr

检查更新的答案。 – SaiUnique

试试这个（更新）

'<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>'

来源

2017-07-12 14:24:41

尝试将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>

来源

2017-07-12 14:47:10 JusMalcolm

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

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

constructor() {} 

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

希望有帮助。阿什利

来源

2017-07-12 15:26:58 ashley

不知道为什么没有人提到这还没有，但是：

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

就是做你所要求的最简单，最有效的方法，只要它不会影响你的代码的其余部分给数组中的对象添加一个额外的参数。

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

为了在数组中的每个项目上都有一个“searchQuery”，那么您需要在某处存储相同数量的searchQueries。将它与您的物品放在一起存放起来要简单得多，但将它分开存放在第二个阵列中也是非常好的。

来源

2017-07-12 20:46:33 snaplemouton

如何清除angular2中的文本框

回答

相关问题