Angular Ngfor ,触发点击第 n(x) 项
Angular Ngfor , trigger click on nth(x) item
如何触发对 ngFor 列表中特定第 nth-child(x) 项的点击?
<ul>
<li class="list" *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li>
</ul>
<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
}
希望这就是您要找的。
你真的很亲近。像这样修改您的代码:
<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
}
如果您需要以编程方式触发对 init 的点击(假设您需要一个 真正的点击事件,该事件还将包含传播 ,否则您可以直接引发点击事件),你可以使用 ViewChildren
和 NgAfterViewInit
.
基本上,您可以使用选择器获取所有 <li>
项:
<ul>
<li #items class="list" *ngFor="let ver of versions;" (click)="versionView(ver)">{{ver.name}}</li>
</ul>
(注意#items 选择器)。
在您的组件中,您可以声明一个选择器定位 "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
或简单地获取特定索引处的项目来简单地获取所需的项目。上面的例子只是为了说明通过选择器可以进行很多操作。
点击事件每次都会被调用,但是可以通过索引查看,是否符合预期的索引?
<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) {
}
}
如何触发对 ngFor 列表中特定第 nth-child(x) 项的点击?
<ul>
<li class="list" *ngFor="let ver of versions; (click)="versionView()">{{ver.name}}</li>
</ul>
<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
}
希望这就是您要找的。
你真的很亲近。像这样修改您的代码:
<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
}
如果您需要以编程方式触发对 init 的点击(假设您需要一个 真正的点击事件,该事件还将包含传播 ,否则您可以直接引发点击事件),你可以使用 ViewChildren
和 NgAfterViewInit
.
基本上,您可以使用选择器获取所有 <li>
项:
<ul>
<li #items class="list" *ngFor="let ver of versions;" (click)="versionView(ver)">{{ver.name}}</li>
</ul>
(注意#items 选择器)。
在您的组件中,您可以声明一个选择器定位 "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
或简单地获取特定索引处的项目来简单地获取所需的项目。上面的例子只是为了说明通过选择器可以进行很多操作。
点击事件每次都会被调用,但是可以通过索引查看,是否符合预期的索引?
<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) {
}
}