Angular 9 异步管道和搜索过滤器
Angular 9 Async pipe and search filter
<input
type="text"
class="form-control"
id="search-text"
[(ngModel)]="searchText"
placeholder="Enter text to search"
autofocus
>
<div class="dropdown-divider m-0"></div>
<ul class="list-group list-group-flush" *ngIf="users$ | async as users">
<li class="list-group-item d-flex justify-content-between align-items-center card-body__headings">
<span class="float-left">{{(users$| async)?.length}} users</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
routerLink="userdetail"
*ngFor="let user of users | search: searchText "
>
+++{{user | json}}
<span class="float-left w-100">
<p class="user-initial">{{user.NAME_INITIALS }}</p>
<em class="list-group-item__detail">
{{user.FIRSTNAME}} {{user.LASTNAME}}
<br/>
<em class="list-group-item__email">{{user.EMAIL}}</em>
</em>
</span>
<span class="badge">
<ish-icon icon="user.remove" cssClass="action-icon"></ish-icon>
</span>
</li>
</ul>
其中搜索是过滤数据的管道。当我在过滤器中检查时,它会返回正确的搜索结果,但不会在 UI 上呈现。表示搜索结果未呈现。
找了这么久终于有了答案
HTML
<ul class="list-group list-group-flush" *ngIf="users$ | async as users">
<li class="list-group-item d-flex justify-content-between align-items-center card-body__headings">
<span class="float-left">{{(users$| async)?.length}} users</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center" routerLink="userdetail"
*ngFor="let user of users | search: 'FIRSTNAME,LASTNAME,EMAIL': searchText ">
<span class="float-left w-100">
<p class="user-initial">{{user.NAME_INITIALS }}</p>
<em class="list-group-item__detail">
{{user.FIRSTNAME}} {{user.LASTNAME}}<br />
<em class="list-group-item__email">{{user.EMAIL}}</em>
</em>
</span>
<span class="badge">
<ish-icon icon="user.remove" cssClass="action-icon"></ish-icon>
</span>
</li>
</ul>
Search pipe
public transform(value, keys: string, term: string) {
if (!term) return value;
return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
}
<input
type="text"
class="form-control"
id="search-text"
[(ngModel)]="searchText"
placeholder="Enter text to search"
autofocus
>
<div class="dropdown-divider m-0"></div>
<ul class="list-group list-group-flush" *ngIf="users$ | async as users">
<li class="list-group-item d-flex justify-content-between align-items-center card-body__headings">
<span class="float-left">{{(users$| async)?.length}} users</span>
</li>
<li
class="list-group-item d-flex justify-content-between align-items-center"
routerLink="userdetail"
*ngFor="let user of users | search: searchText "
>
+++{{user | json}}
<span class="float-left w-100">
<p class="user-initial">{{user.NAME_INITIALS }}</p>
<em class="list-group-item__detail">
{{user.FIRSTNAME}} {{user.LASTNAME}}
<br/>
<em class="list-group-item__email">{{user.EMAIL}}</em>
</em>
</span>
<span class="badge">
<ish-icon icon="user.remove" cssClass="action-icon"></ish-icon>
</span>
</li>
</ul>
其中搜索是过滤数据的管道。当我在过滤器中检查时,它会返回正确的搜索结果,但不会在 UI 上呈现。表示搜索结果未呈现。
找了这么久终于有了答案
HTML
<ul class="list-group list-group-flush" *ngIf="users$ | async as users">
<li class="list-group-item d-flex justify-content-between align-items-center card-body__headings">
<span class="float-left">{{(users$| async)?.length}} users</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center" routerLink="userdetail"
*ngFor="let user of users | search: 'FIRSTNAME,LASTNAME,EMAIL': searchText ">
<span class="float-left w-100">
<p class="user-initial">{{user.NAME_INITIALS }}</p>
<em class="list-group-item__detail">
{{user.FIRSTNAME}} {{user.LASTNAME}}<br />
<em class="list-group-item__email">{{user.EMAIL}}</em>
</em>
</span>
<span class="badge">
<ish-icon icon="user.remove" cssClass="action-icon"></ish-icon>
</span>
</li>
</ul>
Search pipe
public transform(value, keys: string, term: string) {
if (!term) return value;
return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));
}