angular - 如何使用变异数组将第 n 个 child 放在 *ngFor 中

Question

我有一个使用 *ngFor 指令在我的模板中显示的项目列表。数组中的一项将被替换，因此它将被重新渲染。在重新渲染后，我试图在 *ngFor 中选择一个特定元素。
我的第一次尝试
下面的代码一直有效，直到从数组中替换了一个元素并且我使用的引用消失了。
my.component.html

<div *ngFor='let item of array'>
  <input #input type='text' [value]='item.name' \>
  <button (click)='select_function( input )'></button>
</div>

my.component.ts

@Component({
  // ...
})
export class MyComponent {
  public array: [] = [{name: 'Peter'}, {name: 'John'}]
  public select_function( element ) {
    element.focus();
  }
}

一个不完整的解决方案
所以我想我应该以某种方式使用索引。
my.component.html

<div *ngFor='let item of array; let index = index;'>
  <input #input type='text' [value]='item.name' \>
  <button (click)='select_function(index)'>Modify</button>
</div>

my.component.ts

@Component({
  // ...
})
export class MyComponent {
  public array: [] = [{name: 'Peter'}, {name: 'John'}]
  public select_function( index) {
    // the array is mutated ( with ngrx in the actual situation )
    this.array.splice( index, 1, {name: 'Mary'} );
    // how do I get the nth element that was replaced from my template?
    // ???
    element.focus();
  }
}

如何使用索引选择 View 中元素的引用？

Answer 1

使用 ViewChildren 并关注 QueryList 的最后一个元素。小心，您可能需要“等待”Angular 显示新数据(为此使用 setTimeout)

//it's 'input' because your reference variable is #input
@ViewChildren('input',{read:ElementRef}) inputs:QueryList<ElementRef>

public select_function( index) {
    this.array.splice( index, 1, {name: 'Mary'} );
    setTimeout(()=>{
        //if you want the last element
        //inputs.last.nativeElement.focus()
        //if you want the nth
        inputs.find((x,i)=>i==index).nativeElement.focus()
    })
  }