如何將焦點設置為下一步<input>在 *ngFor 指令中

Question

我有一個表格，可以根據用戶希望輸入的托盤數量捕獲許多條形碼。 反過來，這會重復一組輸入，每個輸入都捕獲一個唯一的條形碼。

barcodes.component.html

<div *ngFor="let i of components(number).fill(1), let x = index">
    <input class="form-control" type="text" 
        [(ngModel)]="barcode[x]" (keyup.enter)="keytab($event)"> 
</div>

條形碼.component.ts

keytab(e) {
    let element = e.srcElement.nextElementSibling; // get the sibling element
    
    if(element == null)  // check if its null
        return;
    else
        element.focus();   // focus if not null
}

默認情況下，掃描儀在掃描有效條碼后會自動執行 keyup.enter 事件。

我希望將焦點從剛剛掃描的輸入轉移到下一個可用的空兄弟。

TL;DR如何將焦點設置到下一個尚未填充的可用輸入同級？

Answer 1

您可以進行以下更改，

(keyup.enter)="keytab($event.target)"


keytab(e) {
    let element = e.parentElement.parentElement.childNodes; // get the parent element
    
    for(let child of element){
       if(child.firstChild.type === "text" && child.firstChild.innerHTML === ""){
           child.firstChild.focus();
            return;
        }
    }

Answer 2

我設法用普通的舊 Javascript 解決了這個問題

在*ngFor*內的元素上，我添加了一個數據屬性作為

[attr.id]="x"

基於*ngFor的索引值。

在我的keytab方法中，我執行以下操作

if (event.which === 13) {
    var target = event.target || event.srcElement || event.currentTarget;
    var id = target.attributes.id; // returns target element object
    var val = id.nodeValue; // gets node value of element
            
    if((+val + 1) < this.number) { //prevents focus to 'null' element
        document.getElementById(String(+val + 1)).focus(); //shifts focus to next element
    }
}