聚焦于 ngFor 内的特定输入元素？

Question

在“名称”字段中选择项目名称时，会打开一个无光泽对话框。对话框过程完成后，我需要关注“数量”字段。

目前我正在使用 $event -

e.target.form.children[1].children[0].children[1].children[0].children[0].children[3].children[0].children[0].focus();

这不可靠。 还有其他方法可以以角度方式专注于特定领域吗？ 我已经尝试过“viewchild”选项。它可以访问第一个和最后一个元素。但不是其余的。

            <tbody>
                <div [formGroup]="voucherEntries" class="voucher-entries-container">
                    <!-- Create Rows -->
                    <tr 
                        formArrayName='entries' 
                        *ngFor="let control of entriesControls.controls; 
                        let i = index"
                        class="table-data">
                        <td 
                            [formGroupName]="i" 
                            *ngFor="let header of headers; let headerIndex = index"
                            [style.flex]="header.flex"
                            [style.display]="header.display"
                            >
                            <div 
                                [id]="headerIndex+1" 
                                [tabIndex]="-1">


                                <input
                                    [ngClass]="{'voucher-table-entry-error': this.voucherEntries.get('entries')?.get(i.toString())?.get(header.header)?.errors?.[404]}"
                                    [tabindex]="header.skip" 
                                    [id]="i" 
                                    class="entries"
                                    list="nameEntryList" 
                                    [placeholder]="header.header"
                                    [formControlName]="header.header"
                                    (keyup)="[autoGenNextEntryRows($event), itemSearch($event), calculateTotalForSelectedRow($event), deleteEntry($event)]"
                                    (focus)="resetNameEntryDropdownmenu($event)"
                                    (keydown.escape)='removeFocus($event)' 
                                    (change)="[selectOneItem($event)]"
                                    (click)="selectText($event)" 
                                    type="text">
                                <datalist *ngIf="entryFocus === 'name'" id="nameEntryList">
                                    <option *ngFor="let item of itemData;"
                                        [value]="item.desc.name + ' (' + item.total + ')'"></option>
                                </datalist>
                            </div>
                        </td>

                    </tr>
                </div>
            </tbody>

。 .

Answer 1

由于您已经向元素添加了 id，因此您可以简单地使用：

document.getElementById(myId);

获取 html 元素的引用。

我建议你让元素的 id 更具体一些。例如，您可以将“数量”列中单元格的 ID 设置为

[id]="'qty-' + index"

然后选择特定数量列

document.getElementById('qty-3');