angular2 ngfor异步管道过滤不起作用

Question

My code is retrieving a list of users from a service and displaying using ngfor async with no issues. I wanted to provide a way for the user to filter the results using a filter pipe. Just cannot get this to work. Triedwith and without the ( *ngIf="peopleData") on the body. I am thinking the user filter input userName is not being recognized.

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

  }


}

modal-user-list-component.html

<button class="btn btn-primary" (click)="open()">Assign</button>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { SidebarComponent } from "./core/nav/sidebar.component";

import { WorkflowDisplayComponent } from  './components/workflow_display/workflow-display.component'
import { TaskComponent } from "./components/workflow_display/task.component";
import { WorkflowService } from  './components/workflow_display/workflow.service'
import { PropertyService } from  './shared/property.service';
import { NotificationsService } from "./shared/notifications/notifications.service";
import { Notifications } from "./shared/notifications/notifications.component";
import { TaskViewService } from "./components/workflow_display/views/task-view-service";
import { CookieService } from "./shared/cookie.service";
import { AppRoutingModule } from "./app-routing.module";
import { DatePipe } from "./shared/date-pipe";
import {UsernameFilterPipe} from './components/workflow_display/username-filter-pipe';
import { NgbdModalComponent, NgbdModalContent } from './components/workflow_display/modal-user-list-component';

function propertyServiceFactory(config: PropertyService) {
  return () => config.load();
}

@NgModule({
  declarations: [
    AppComponent,
    Notifications,
    SidebarComponent,
    WorkflowDisplayComponent,
    TaskComponent,
    DatePipe,
    AppComponent,
    NgbdModalComponent,
    NgbdModalContent,
    UsernameFilterPipe,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpModule,
    NgbModule.forRoot(),
  ],
  providers: [
    {
      // Provider for APP_INITIALIZER
      provide: APP_INITIALIZER,
      useFactory: propertyServiceFactory,
      deps: [PropertyService],
      multi: true
    },
    NotificationsService,
    PropertyService,
    CookieService,
    WorkflowService,
    TaskViewService
  ],
  entryComponents: [NgbdModalContent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

Answer 1

you need remove async from for loop and add if case above for loop

<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>

Answer 2

I fixed the issue with ngif by adding async to the if. However the usernameFilterPipe filter is still not working:

    <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>