Angular 2 - 如何选择新创建的元素

Question

我有以下模板：

<tr *ngFor="let block of selectedItem.blocks;let index=index">
  <td>
    <div class="input-group">
      <input type="number" class="idx-{{index}}" [(ngModel)]="selectedItem.blocks[index].min" name="{{'minimum'+index}}">
    </div>
  </td>
</tr>
<tr>
    <td>
        <button type="button" class="btn" (click)="addBlock()">Add Block</button>
    </td>
</tr>

我遇到的问题似乎与addBlock()方法有关：

addBlock() {
    this.selectedItem.blocks.push(new Block({
      minimum: this.selectedItem.blocks.length
        ? this.selectedItem.blocks[this.selectedItem.blocks.length - 1].maximum
        : 0
    }));

    this.elRef.nativeElement.querySelector('.idx-' + this.selectedItem.blocks.length - 1).focus();
}

由于某种原因，this.elRef.nativeElement.querySelector无法看到新创建的元素。我需要做些什么来等待执行querySelector直到添加元素之后。

更新 this.elRef是ElementRef的实例：

constructor(private elRef: ElementRef) {}

Answer 1

你可以尝试制作你的组件implements AfterViewChecked和ngAfterViewChecked里面，做你的东西

ngAfterViewChecked() {
  this.elRef.nativeElement.querySelector('.idx-' + this.selectedItem.blocks.length - 1).focus();
}