Angular Ngfor ，触发点击 nth(x) 项目答案

【问题标题】：Angular Ngfor , trigger click on nth(x) itemAngular Ngfor ，触发点击 nth(x) 项目
【发布时间】：2019-09-22 03:09:06
【问题描述】：

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

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

【问题讨论】：

是否需要在渲染块之后以编程方式触发点击？此外，上面的 HTML 中存在语法错误。
是的，我需要在渲染块@briosheje 后以编程方式触发点击
好的，接听来电。

标签： javascript angular ngfor

【解决方案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
}

我希望这就是你要找的。p>

【讨论】：

如果您的问题是运行版本的第 n 个元素的代码，您可能不需要更改模板中的任何内容，您只需在需要的地方添加 this.versionView(versions[i])你的 JS/TS 组件文件。也许您甚至可以使用更简单的语法。

【解决方案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
}

【讨论】：

你希望什么时候调用这个函数？例如，您可以在 ngAfterViewInit: ngAfterViewInit() { this.versionView(this.versions[n]); } 中调用它。这将在视图初始化后调用该函数。

【解决方案3】：

如果您需要以编程方式触发 init 上的点击（假设您需要一个包含传播的真实点击事件，否则您可以只引发点击事件），您可以使用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 或简单地获取特定索引处的项目来获取所需的项目。上面的例子只是为了说明通过选择器可以进行很多操作。

【讨论】：

如何使用索引定位特定项目？有示例代码吗？
@ShibinRagh “特定项目”是什么意思？
是的，我得到了语法 (this.liItems.find( (item , index) => index === 1 ).nativeElement as HTMLElement).click();
@ShibinRagh 如果您只需要以某种方式触发索引3 处的元素（假设您正在谈论数组索引），您可以执行(this.liItems[3].nativeElement as HTMLElement).click()，您不需要遍历它，你也可以直接访问数组或者直接使用.find。
它的错误 - ERROR TypeError: Cannot read property 'nativeElement' of undefined

【解决方案4】：

每次都会调用click事件，但是可以通过index来检查，是否符合预期的index？

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

【讨论】：