Угловой Ngfor, нажмите триггер на элементе nth (x) - PullRequest
Новая
       15

Угловой Ngfor, нажмите триггер на элементе nth (x)

2 голосов
/ 03 мая 2019

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

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

Ответы [ 4 ]

1 голос
/ 03 мая 2019

Событие 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 голос
/ 03 мая 2019

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

<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 голос
/ 03 мая 2019

Если вам нужно программно инициировать щелчок по init (при условии, что вам нужно событие реального щелчка, которое также будет включать распространение , в противном случае вы можете просто вызвать событие click), вы можете сделать это, используя ViewChildren и 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();
    });
  }
}

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

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

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

1 голос
/ 03 мая 2019 
<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
}

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

...