在Angular 5中过滤异步数据的管道

Question

我使用管道过滤数据从服务器异步进入的表，直到数据到达，隧道连续返回undefined：

我的烟斗：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], userName): any {
        console.log('Usernames', userName);

        return userName
            ? items.filter(item => item.displayUsername.indexOf(userName) !== -1)
            : items;
    }
}

我在哪里使用它：

<input type="text"
name="userName"
[(ngModel)]="userName">

<div
 *ngFor="let user of (users | async | filter: userName );"
>

这对应用程序性能有非常糟糕的影响。

也许我理解管道的工作并不完全正确，但是 如何重写管道以便仅在将文本输入输入时才返回值？