我正在制作类似`ngFor 的指令
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Directive({
selector: '[appVirtualFor]',
})
export class VirtualForDirective {
public items$ = new BehaviorSubject<unknown[]>([]);
@Input()
set appVirtualForOf(value: unknown[]) {
this.items$.next(value);
}
@Input('appVirtualForFilterBy')
appVirtualForFilterBy(e: unknown) {
return e.toString();
}
constructor(public viewContainerRef: ViewContainerRef, public template: TemplateRef<unknown>) {}
}
现在,我可以做这样的事情
*appVirtualFor="let account of accounts$ | async; filterBy: filterAccounts"
并像这样定义 trackBy 方法
filterAccounts(account: AccountEntity) {
return account.name;
}
但是,必须根据我的循环内容多次定义此 filterBy 函数,这有点“烦人”。
我想知道是否有可能这样做:
*appVirtualFor="let account of accounts$ | async; filterBy: account?.name"
或类似的东西,直接在模板中。