angular2 ngfor異步管道過濾不起作用

Question

我的代碼正在從服務中檢索用戶列表，並使用ngfor async正常顯示。 我想為用戶提供一種使用過濾器管道過濾結果的方法。 只是無法使它工作。 在正文上不帶（* ngIf =“ peopleData”）進行嘗試。 我認為用戶過濾器輸入userName無法識別。

用戶名 - 過濾器 - 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

您需要從for循環中刪除async，並在上述for循環中添加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>

Answer 2

我通過向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>