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

Question

我的代码是检索服务中的用户列表，并显示使用ngfor异步没有问题。我想为用户提供一种使用过滤器管道过滤结果的方法。只是不能让这个工作。试着在身体上没有（* ngIf =“peopleData”）。我想用户筛选器输入用户名不被识别。

用户名 - 过滤器 - 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; 
    } 
} 

模态用户一览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); 

    } 


} 

模态用户一览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

你需要从循环中删除异步和添加，如果上述情况对循环

<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

我加入异步的，如果固定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>