Как я могу вызвать щелчок по определенному элементу nth-child (x) в списке ngFor?

<ul>
    <li class="list"  *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li>
</ul>
3
ShibinRagh 3 Май 2019 в 17:37

4 ответа

Лучший ответ

Если вам нужно программно инициировать нажатие кнопки init (при условии, что вам нужно событие реального щелчка, которое также будет включать распространение , в противном случае вы можете просто вызвать событие click), вы можете сделать это с помощью {{X0 }} и NgAfterViewInit.

По сути, вы можете использовать селектор, чтобы получить все элементы <li>:

<ul>
  <li #items class="list" *ngFor="let ver of versions;" (click)="versionView(ver)">{{ver.name}}</li>
</ul>

(обратите внимание на селектор #items).

В вашем компоненте вы можете объявить селектор, нацеленный на «элементы»: @ViewChildren('items') liItems: QueryList<ElementRef>.

После этого вы можете перебирать элементы после того, как представление будет готово, и вызывать щелчок по собственному HTML-элементу:

  public ngAfterViewInit() {
    const targetItem = 10;
    // If the item is the 10th element, click it.
    this.liItems.forEach((item, index) => {
      if (index === (targetItem - 1)) (item.nativeElement as HTMLElement).click();
    });
  }

Пример полного кода компонента:

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChildren('items') liItems: QueryList<ElementRef>

  public versions: { name: string }[];

  public constructor() {
    this.versions = Array.from({length: 10}).map((_, i) => {
      return { name: i.toString() };
    });
  }

  public versionView(i: {name: string}) {
    console.log('clicked item: ', i);
  }

  public ngAfterViewInit() {
    const targetItem = 10;
    // If the item is the 10th element, click it.
    this.liItems.forEach((item, index) => {
      if (index === (targetItem - 1)) (item.nativeElement as HTMLElement).click();
    });
  }
}

Рабочий stackblitz: https://stackblitz.com/edit/angular-1eha8j

(проверьте консоль, чтобы увидеть, что щелкнул пункт 10)

Осторожно: в приведенном выше примере я использовал forEach для зацикливания элементов, но вы можете просто получить нужный вам элемент, используя .find или просто получив элемент по определенному индексу. Приведенный выше пример просто показывает, что многие манипуляции возможны с помощью селекторов.

1
briosheje 3 Май 2019 в 15:06

Событие click будет вызываться каждый раз, но его можно проверить по индексу, соответствует ли он ожидаемому индексу или нет?

<ul>
    <li class="list" *ngFor="let ver of versions; let i = index" (click)="versionView(i)">{{ver.name}}</li>
</ul>

И индекс можно проверить по коду * .ts, как показано ниже:

function versionView(i) {
    if (i == NTH_VALUE) {
         
    }    
}
1
Nishant Thakkar 3 Май 2019 в 15:33

Вы действительно близко. Измените ваш код следующим образом:

<ul>
  <li class="list" *ngFor="let ver of versions" (click)="versionView(ver)">{{ver.name}}</li>
</ul>

В ваш соответствующий компонент вам просто нужно добавить:

versionView(ver: any) {
  // Do something with the ver object
}
1
kevernicus 3 Май 2019 в 14:44
<ul>
    <li class="list" *ngFor="let ver of versions; let i = index" (click)="versionView()">{{ver.name}}</li>
</ul>

Вы можете добавить let i = index для ссылки на n-й элемент и использовать его по своему усмотрению. Вы можете передать его в качестве параметра в функцию versionView() и использовать там.

function versionView(i) {
    if (i !== NTH_VALUE) {
        return 
    }
    // Execute your function here
}

Я надеюсь, что это то, что вы искали.

1
Carbamate 3 Май 2019 в 14:44