在Angular中,可以使用自定义指令来控制或覆盖NgFor的索引。下面是一个示例解决方法:
indexControl
的自定义指令。import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[indexControl]'
})
export class IndexControlDirective {
constructor(
private templateRef: TemplateRef,
private viewContainer: ViewContainerRef
) { }
@Input()
set indexControlFrom(index: number) {
this.viewContainer.clear();
for (let i = index; i < index + this.indexControl; i++) {
this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: i });
}
}
@Input('indexControl')
indexControl: number;
}
indexControl
指令来控制或覆盖NgFor的索引。
{{ i }}
在上面的示例中,indexControl
指令的indexControl
输入属性用于指定要显示的项目数量,indexControlFrom
输入属性用于指定要开始的索引。在这个例子中,NgFor将从索引5开始,显示3个项目。输出将是6、7和8。
希望这个示例能帮助你控制或覆盖NgFor的索引。