Question

如何获取nGfor中输入类型文本的最后一个子元素？对于第一个孩子：

span:first-child > input[type=text]

它工作正常，但对于最后一个孩子，dom似乎没有一个最后一个孩子。.这里有角度6。

Answer 1

您可以使用ViewChildren（在stackblitz中，如果您在新窗口中打开页面，首先，最后一个元素将获得焦点，每次按下“添加按钮”，最后一个元素也将获得焦点。

这个想法是一系列带有参考名称的输入，例如输入

<p *ngFor="let i of elements"><input #input ></p>

您定义

  @ViewChildren('input') inputs:QueryList<ElementRef>

在ngAfterViewInit

  ngAfterViewInit() {
    this.inputs.last.nativeElement.focus()

    this.inputs.changes.subscribe(() => {
        this.inputs.last.nativeElement.focus()
    })
  }

如果我们的代码允许更改输入数量，则必须订阅this.inputs.changes。

注意：在堆叠闪电战中，我使用了尖顶管道（takeWhile（（）=> this.alive）来取消订阅销毁组件

Answer 2

我认为您只想更改最后一项的类，所以我使用了Eliseo代码，但我没有听更改，而是检查该元素在创建时是否是元素中的最后一项。也许您不需要那种聆听的复杂性。

https://stackblitz.com/edit/angular-l5ccns

<button (click)="elements.push(1)">add</button>
<p *ngFor="let i of elements; let ind = index"><input #input [ngClass]="{'lastItem': ind === elements.length-1}" ></p>

如何选择角输入类型文本的最后一个子代？

2 个答案: