javascript - 用焦点值填充剩余的输入文本字段

Question

我有 3-4 种产品及其价格表格。我的页面看起来像

我的代码看起来像，

<table>
      <tr *ngFor="let val of prods">
        <td class="sea">
          <input type="text" [(ngModel)]="val.key" />
        </td>
        <td *ngFor="let sale of val.sales">
          <input  type="text" [(ngModel)]="sale.value" />
        </td>
      </tr>
    </table>

即变量绑定(bind)到每个文本框。

现在我需要的是我必须创建一个新的 shotcut 以使用当前聚焦元素中的值(按行)自动填充所有值。因此，如果我在第一行的第一列输入 100，然后按 F2，第一行中的所有值都应替换为 100。

我可以使用以下代码监听按键事件并获取当前焦点元素的值，

@HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
    if (event.code === 'F2') {
      if (document.activeElement['value']) {

      }
    }
  }

但不知道如何将此值填充到所有同级输入字段。我知道在 angular 中使用 jQuery 是个坏主意。以 Angular 方式解决这个问题有什么帮助吗？

Answer 1

对于正在为类似情况寻找解决方案的任何人。

<table>
  <tr *ngFor="let val of prods">
  <td class="sea">
      <input type="text" [(ngModel)]="val.key" />
  </td>
  <td *ngFor="let sale of val.sales ; let k = index">
      <input (keydown)="onKeydown($event, k, val )"  type="text" [(ngModel)]="sale.value" />
  </td>
  </tr>
</table>


onKeydown(event, k, arr) {
  if (event.code === 'F2' && k === 0) {
    if (document.activeElement['value']) {
      const elemval = document.activeElement['value'];
      for (const elmnt of arr.sales) {
        elmnt.value = elemval;
      }
    }
  }
}