我在视图中有动态卡片。每张卡上都有一个文本框,旁边有一个按钮。我想触发该文本框以“ Enter Key”为焦点的卡的按钮的单击事件。如图所示的卡。另外,我也在努力清除所选卡文本框中的内容。
我尝试使用ViewChild清除文本框的内容
@ViewChild('bidamount') txtbidamount: ElementRef;
this.txtbidamount.nativeElement.value = '';
但是使用这种方法,只会清除第一张卡片的文本框。
答案 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
希望对您有帮助!