Question

我有一个MatTableDataSource，它显示了从MongoDB中检索到的一些元素，并且我想过滤表的每一列，以便仅具有与输入匹配的内容。这是我的代码：

datatable.component.ts

export class DatatableComponent implements OnInit {

 @ViewChild(MatPaginator) paginator: MatPaginator;

 pratiche: any;
 displayedColumns: string[] = ['idPratica', 'barcode', 'status', 'firstName', 'lastName', 'fiscalCode', 'pratica'];
 dataSource = new MatTableDataSource(this.pratiche);
 idFilter = new FormControl('');
 barcodeFilter = new FormControl('');

 filterValues = {
 id: '',
 barcode: '',
 };

 constructor(private praticaService: PraticaService) {
 this.dataSource.data = this.pratiche;
 this.dataSource.filterPredicate = this.createFilter(); 
 }

 async ngOnInit() {
  const res = await this.praticaService.getAllPratiche();
  this.pratiche = res.data;
  this.dataSource = new MatTableDataSource(this.pratiche);
  this.dataSource.paginator = this.paginator;

  this.idFilter.valueChanges
   .subscribe(
     id => {
       this.filterValues.id = id;
       this.dataSource.filter = JSON.stringify(this.filterValues);
     }
  )
  this.barcodeFilter.valueChanges
   .subscribe(
     barcode => {
      this.filterValues.barcode = barcode;
      this.dataSource.filter = JSON.stringify(this.filterValues);
    }
  )
 }

  createFilter(): (data: any, filter: string) => boolean {
   let filterFunction = function (data, filter): boolean {
   let searchTerms = JSON.parse(filter);
   return data.id.toLowerCase().indexOf(searchTerms.id) !== -1
    && data.barcode.toLowerCase().indexOf(searchTerms.barcode) !== -1
    && data.status.toLowerCase().indexOf(searchTerms.status) !== -1
    && data.firstName.toLowerCase().indexOf(searchTerms.firstName) !== -1
    && data.lastName.toLowerCase().indexOf(searchTerms.lastName) !== -1
    && data.fiscalCode.toLowerCase().indexOf(searchTerms.fiscalCode) !== -1;
 }
 return filterFunction;
 }
}

datatable.component.html

<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="idPratica">
  <th class="header" mat-header-cell *matHeaderCellDef>
    ID Pratica
    <mat-form-field class="filter" floatLabel="never">
      <mat-label></mat-label>
      <input matInput [formControl]="idFilter">
    </mat-form-field>
  </th>
  <td mat-cell *matCellDef="let element">{{element.id}}</td>
</ng-container>

<ng-container matColumnDef="barcode">
  <th class="header" mat-header-cell *matHeaderCellDef>
    Barcode
    <mat-form-field class="filter" floatLabel="never">
      <mat-label></mat-label>
      <input matInput [formControl]="barcodeFilter">
    </mat-form-field>
  </th>
  <td mat-cell *matCellDef="let element">{{element.barcode}}</td>
</ng-container>
 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>

pratica.service.ts

public getAllPratiche(): Promise<any> {
    const url = "http://127.0.0.1:3001/pratiche/getPratiche";
    return new Promise((resolve, reject) => {
        this.http.get(url, { responseType: "json", observe: "response" })
            .pipe(map((response: any) => response))
            .subscribe(res => {
                if (res.error) {
                    reject(res.error);
                } else {
                    resolve(res.body);
                }
            }, err => {
                reject(err)
            });
    });
}

我从MongDb正确检索了我的数据，但是当我尝试对其进行过滤时，什么也没发生。我是新手，可能是在Promise vs Observable上犯了错误。有什么建议吗？

为什么valueChanges在我的代码中不起作用？

0 个答案: