Question

如何触发ngFor列表中特定nth-child（x）项目的点击？

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

Answer 1

<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
}

我希望这就是您想要的。

Answer 2

您真的很亲近。像这样修改您的代码：

<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
}

Answer 3

如果您需要以编程方式触发点击初始化（假设您需要一个实际点击事件，该事件还将包括传播，否则您只需引发点击事件），就可以使用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或通过在特定索引处获得该项目来获取所需的项目。上面的示例只是为了说明通过选择器可以进行许多操作。

Answer 4

每次都会单击事件，但是可以通过索引检查它是否符合预期的索引？

<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) {
         
    }    
}

Angular Ngfor，触发单击第n（x）个项目

4 个答案: