Angular 9 异步管道和搜索过滤器答案

【问题标题】：Angular 9 Async pipe and search filterAngular 9 异步管道和搜索过滤器
【发布时间】：2020-08-14 18:36:46
【问题描述】：

<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 上呈现。表示搜索结果未呈现。

【问题讨论】：

尝试使用：*ngFor="let user of users | 搜索：searchText | async"
很高兴知道管道search 的来源以及签名。

标签： angular rxjs6 angular-filters angular-pipe

【解决方案1】：

找了很久终于找到答案了。

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>

搜索管道

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])));

}

【讨论】：