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

Question

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

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

@ViewChild('bidamount') txtbidamount: ElementRef;

this.txtbidamount.nativeElement.value = '';

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

Answer 1

  

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

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

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

document.getElementById('me').value = ''; // clear value

<input value="before" id="me"/>

Answer 2

由于代码会生成多个组件，因此您可能应该使用“ 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

希望对您有帮助！