javascript - 如何在 ngFor 中使用引用 id ( # ) 并在下一个 NG select 中获得焦点？

Question

我有循环 ngFor 并且我需要使用索引声明引用 id '#' .For 例如

<button (click)="addRow()"></button>
<tr *ngFor="let data of datas; let i= index">
<td><ng-select #data{{i}} ></ng-select></td>
</tr>

addRow(){
// after selected data next row to focus.
}

我想关注 ng-select 的下一行。

Answer 1

更新 Viewchildren 输入或 ng-select

通过输入，您可以使用 ViewChildren

<div *ngFor="let item of items">
      <input #data/>
</div>

@ViewChildren('data') data: QueryList<ElementRef>;
ngAfterViewInit()
{
    this.data.changes.subscribe(()=>{
       this.data.last.nativeElement.focus();
    })
}

如果我们有您需要的 ng-select

<div *ngFor="let item of items">
   <ng-select #data .....>
   </ng-select> 
</div>

<!--see that the "QueryList" is a NgSelectComponent-->
@ViewChildren('data') data: QueryList<NgSelectComponent>;
ngAfterViewInit()
    {
        this.data.changes.subscribe(()=>{
          <!--we use filterInput.nativeElement-->
          this.data.last.filterInput.nativeElement.focus();
        })
    }

一个full stackblitz (在 stackblitz 中，我添加了一个“takeWhile”来取消订阅 ngOnDestroy 元素中的更改)