Question

我的代码正在从服务中检索用户列表，并使用ngfor async进行显示而没有任何问题。我想为用户提供一种使用过滤管道过滤结果的方法。只是不能让这个工作。在身体上尝试并且没有（* ngIf =＆＃34; peopleData＆＃34;）。我认为用户过滤器输入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并添加if case 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

我通过向if添加async修复了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>

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

2 个答案: