Как выбрать последний дочерний элемент типа ввода текста в угловых?

Question

Как я могу получить последний дочерний элемент текста входного типа внутри nGfor? Для первого ребенка:

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

это работает просто отлично, но у последнего ребенка у семьи, похоже, нет последнего ребенка ... Звонок 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>