异步管道过滤的angular2 NG2不工作

我的代码是从服务中检索用户列表，并使用ngforasync显示，没有任何问题。我想为用户提供一种使用过滤管道过滤结果的方法。就是不能让它工作。在身体上使用和不使用（*ngIf=“peopleData”）进行测试。我认为用户筛选器输入用户名未被识别

username-filter-pipe.ts

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

@Pipe({
  name: 'usernameFilterPipe'
})

export class UsernameFilterPipe implements PipeTransform {

  transform(value: any[], args: String[]): any {
    let filter = args[0].toLocaleLowerCase();
    return filter ? value.filter(user => 
user.displayName.toLowerCase().indexOf(filter) !== -1) : value;
  }
}

modal-user-list-component.ts

import {Component, Input} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
import { WorkflowService } from './workflow.service';
import { GrcUser } from './grc-user';
import {UsernameFilterPipe} from './username-filter-pipe';

@Component({
  selector: 'ngbd-modal-content',
  providers: [WorkflowService],
  template: `
<div class="modal-header">
  <input type="text" id="inputUserName" class="form-control" placeholder="UserName" [(ngModel)]="userName">
  <button type="button" id="workflow_display_task_assign_modal_dismiss" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
  <span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"  *ngIf="peopleData" style="width:auto;height:auto">
    <table class="table table-bordered table-responsive table-hover table-sm">
    <thead>
        <tr>
            <th> <div>UserName</div></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let editor of peopleData | async | usernameFilterPipe:userName " (click)="setCurrentEditor($event, editor)" 
         [class.table-info]="isSelected(editor)">
            <td>
               {{ editor.displayName }}
            </td>
        </tr>
      </tbody>
    </table> 
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" id="workflow_display_task_assign_modal_submit" (click)="activeModal.close('Close click')">Submit</button>
 </div>
`
})
export class NgbdModalContent {
  @Input() peopleData: Observable<Array<any>>;
  currentSelectedEditor : GrcUser;

  constructor(public activeModal: NgbActiveModal,private peopleService: WorkflowService) {

    this.peopleData = peopleService.getAllUserInfo();

    console.log("PeopleData in NgbdModalContent constructor :" + this.peopleData);

  }

  isSelected(editor: any) {
    return ((this.currentSelectedEditor) && (this.currentSelectedEditor.userId == editor.userId));
  }

  setCurrentEditor(event: any, editor: any) {
    if (this.isSelected(editor)) {
      this.currentSelectedEditor = null;
    } else {
      this.currentSelectedEditor = editor;
    }
  }



}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-user-list-component.html'
})


export class NgbdModalComponent {

  constructor(private modalService: NgbModal) {}

  open() {

    const modalRef = this.modalService.open(NgbdModalContent);

  }


}

---

您需要从for循环中删除async，并在for循环上面添加if case

<div *ngIf="peopleData?.length > 0">

     <tr *ngFor="let editor of peopleData  | usernameFilterPipe:userName " (click)="setCurrentEditor($event, editor)" 
             [class.table-info]="isSelected(editor)">
                <td>
                   {{ editor.displayName }}
                </td>
            </tr>

    </div>

{{editor.displayName}

我通过将异步添加到if解决了ngif的问题。但是，usernameFilterPipe筛选器仍不工作：

    <tbody>
    <div *ngIf="(peopleData | async)?.length > 0">
        <tr *ngFor="let editor of peopleData | async | usernameFilterPipe:userName " (click)="setCurrentEditor($event, editor)" 
         [class.table-info]="isSelected(editor)">
            <td>
               {{ editor.displayName }}
            </td>
        </tr>
        </div>
      </tbody>

{{editor.displayName}

我通过在if中添加async解决了ngif的问题。但是usernameFilterPipe筛选器仍不工作：{{editor.displayName}

<div *ngIf="peopleData?.length > 0">

     <tr *ngFor="let editor of peopleData  | usernameFilterPipe:userName " (click)="setCurrentEditor($event, editor)" 
             [class.table-info]="isSelected(editor)">
                <td>
                   {{ editor.displayName }}
                </td>
            </tr>

    </div>

    <tbody>
    <div *ngIf="(peopleData | async)?.length > 0">
        <tr *ngFor="let editor of peopleData | async | usernameFilterPipe:userName " (click)="setCurrentEditor($event, editor)" 
         [class.table-info]="isSelected(editor)">
            <td>
               {{ editor.displayName }}
            </td>
        </tr>
        </div>
      </tbody>