最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular Ngfor , trigger click on nth(x) item - Stack Overflow

programmeradmin0浏览0评论

How can i trigger click on specific nth-child(x) item in ngFor listing ?

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

How can i trigger click on specific nth-child(x) item in ngFor listing ?

<ul>
    <li class="list"  *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li>
</ul>
Share Improve this question asked May 3, 2019 at 14:37 ShibinRaghShibinRagh 6,6564 gold badges37 silver badges61 bronze badges 3
  • Do you need to trigger the click programmatically after rendering the block? Besides, there is a syntax error in your HTML above. – briosheje Commented May 3, 2019 at 14:46
  • Yes, I need to trigger the click programmatically after rendering the block @briosheje – ShibinRagh Commented May 3, 2019 at 14:57
  • Ok, answer ining. – briosheje Commented May 3, 2019 at 14:58
Add a ment  | 

4 Answers 4

Reset to default 2

If you need to trigger programmatically the click on init (assuming you need a real click event that will also include the propagation, otherwise you can just raise the click event), you can do that using ViewChildren and NgAfterViewInit.

Basically, you can use a selector to acquire all the <li> items:

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

(note the #items selector).

In your ponent, you can declare a selector targeting "items": @ViewChildren('items') liItems: QueryList<ElementRef>.

After that, you can loop through the items after the view is ready and trigger the click on the native html element:

  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();
    });
  }

Full ponent code sample:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.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();
    });
  }
}

Working stackblitz: https://stackblitz./edit/angular-1eha8j

(check the console to see that the item 10 is clicked)

Beware: In the sample above I've used forEach to loop the items, but you can simply acquire the item you need using .find or by simply getting the item at a specific index. The above example is just to show that many manipulations are possible through selectors.

Click event will be called every time, but it can be checked through index, whether it matches the expected index or not?

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

And index can be checked on *.ts code as below:

function versionView(i) {
    if (i == NTH_VALUE) {
         
    }    
}

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

You can add let i = index in order to refer the nth element, and use it as you prefer. You can pass it as a parameter in your versionView() function and use it there.

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

I hope this is what you were looking for.

You are really close. Modify your code like so:

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

In your corresponding ponent you just need to add:

versionView(ver: any) {
  // Do something with the ver object
}
发布评论

评论列表(0)

  1. 暂无评论