触发按钮的单击事件,该按钮的最近文本框为焦点

时间:2018-08-29 05:23:03

标签: angular typescript

我在视图中有动态卡片。每张卡上都有一个文本框,旁边有一个按钮。我想触发该文本框以“ Enter Key”为焦点的卡的按钮的单击事件。如图所示的卡。另外,我也在努力清除所选卡文本框中的内容。

enter image description here

我尝试使用ViewChild清除文本框的内容

@ViewChild('bidamount') txtbidamount: ElementRef;

this.txtbidamount.nativeElement.value = '';

但是使用这种方法,只会清除第一张卡片的文本框。

2 个答案:

答案 0 :(得分:1)

  

我也在努力清除所选卡文本框中的内容。

由于您未在此处提供任何代码,因此有些代码可以使用:

  • 鉴于输入具有一些标识符,例如id属性me,以下代码从输入中清除before的值

document.getElementById('me').value = ''; // clear value
<input value="before" id="me"/>

答案 1 :(得分:1)

由于代码会生成多个组件,因此您可能应该使用“ ViewChildren ”和“ QueryList ”,而不要使用单数的“ ViewChild ”。

因此,请使用以下命令写入卡组件:

@ViewChildren('bidamount') inputBidAmount: QueryList<ElementRef>;
getClickAmount(index, item) {
    console.log(index,this.inputBidAmount.toArray()[index])
    console.log(this.inputBidAmount.toArray()[index])
}

在HTML中:

<div *ngFor="let item of items; let i =index">
   <input type="text" id="{{'txt'+ item.id}}" #bidamount/>
   <button (click)="getClickAmount(i, item)">Bid</button>
</div>

已更新Stackblitz  Trigger click event of button whose nearest textbox is focused

希望对您有帮助!