angular - *ngFor 与过滤管道和切片不起作用
问题描述
我在 ngFor 元素中有一个包含搜索字段和用户列表的组件。我的目标是只显示列表中的前 10 个用户。这是html部分:
<div class="admins-box-input">
<input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}">
<div class="card-user" *ngFor="let admin of admins | slice:0:10; filter:term">
<img src="{{admin?.avatar}}" alt="">
<h2>{{admin?.first_name}} {{admin?.last_name}}</h2>
</div>
</div>
但我不断收到此错误 -Can't bind to 'ngForFilter' since it isn't a known property of 'div'. ("xt" [(ngModel)]="term" [ngModelOptions]="{standalone: true}">
<div class="card-user" [ERROR ->]*ngFor="let admin of admins | slice:0:10; filter:term">
<img src="{{admin?.avatar}}""): ng:///AppModule/GroupCreateComponent.html@72:37
Property binding ngForFilter not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}">
[ERROR ->]<div class="card-user" *ngFor="let admin of admins | slice:0:10; filter:term">
任何帮助将不胜感激。我在这里使用 Ng2SearchPipeModule,这个管道运行良好 -*ngFor="let admin of admins | filter:term"
但是当我尝试在其中添加一些东西时,它会中断。
解决方案
像这样应用多个管道:
let admin of admins | slice:0:10 | filter:term
推荐阅读
- html - 为什么 flex-basis 不使用 flex-direction 'column' 设置 flex-items 的高度?
- mule - Why does Mule DataWeave array map strip top level objects?
- sorbet - How do I install release build of sorbet?
- php - 从子 SKU Magento 2 获取父 SKU(可配置或捆绑)
- vba - SAP 连接为空时运行时错误“91”
- android - 我想获取单击的课程按钮的 ID 并加载该 ID 的数据
- python-3.x - 有没有办法用一些重复的元素对未排序的列表进行排序?
- function - How to use a signal as function parameter in CAPL
- c# - 在 C# 字典中查找元组键的问题
- django - 使用 django ORM 过滤三个表