在ngFor表单中使用AutoComplete,可以通过以下步骤实现:
<form>
<div *ngFor="let item of items">
<input type="text" [(ngModel)]="item.name" [ngbTypeahead]="search" />
</div>
</form>
export class FormComponent {
items: any[] = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map(term => term.length < 2 ? []
: this.items.filter(item => item.name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
);
}
这样,你就可以在ngFor表单中使用AutoComplete来实现自动完成功能了。根据具体的需求,你可以根据ngbTypeahead指令的参数来自定义自动完成的行为,比如最大匹配项数、搜索延迟时间等。
推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款全栈云开发平台,提供了丰富的云计算服务和工具,包括云函数、云数据库、云存储等,可以帮助开发者快速构建和部署应用。了解更多信息,请访问腾讯云云开发官网:https://cloud.tencent.com/product/tcb。
云原生正发声
Elastic 实战工作坊
企业创新在线学堂
DBTalk技术分享会
Techo Day
云+社区技术沙龙[第9期]
企业创新在线学堂
领取专属 10元无门槛券
手把手带您无忧上云