Question

订阅NGRX中的商店时，我无法过滤表格数据。

我尝试了各种获取和显示数据的方式。数据表按预期加载，但是当我尝试过滤数据时，它只是将所有内容过滤掉。

来自component.ts

 export class CheckedInTableComponent implements OnInit {
  private subscription: ISubscription;
  // checkedInUsers: UserEvent[] = [];
  dataSource: MatTableDataSource<UserEvent>;
  userEvents: UserEvent[] = [];

  constructor(private checkinService: CheckinService) { }

  displayedColumns = ['name', 'supplier', 'visiting', 'dept', 'purpose', 'checkedIn', 'accessExpires', 'options'];

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;

  }
  ngOnInit() {
    this.subscription = this.checkinService.setCheckedInUsers().subscribe(res => { this.dataSource = new MatTableDataSource<UserEvent>(res) });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

来自service.ts

  setCheckedInUsers() {
    this.store.dispatch(new checkinActions.LoadCheckedin());
    return this.store.pipe(select(getEvents),map(res => {return this.checkedInUsers = res}))
  }

HTML

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<table mat-table [dataSource]="dataSource" fxLayoutGap="1rem grid" fxFill>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
            {{element.user.title}} {{element.user.firstName}} {{element.user.lastName}}
        </td>
    </ng-container>
...

订阅时筛选器在物料表上不起作用

0 个答案: