Angular 材质表服务器端过滤

Question

我想制作 mat-table 以便在通过 HTTP 检索数据时进行过滤。我设法通过使用官方文档示例进行排序和分页。但我不知道如何在这个例子中添加过滤：

HTML：

    <div class="example-container mat-elevation-z8">
      <div class="example-loading-shade"
           *ngIf="isLoadingResults || isRateLimitReached">
        <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
        <div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
          GitHub's API rate limit has been reached. It will be reset in one minute.
        </div>
      </div>
    
      <div class="example-table-container">

    <table mat-table [dataSource]="filteredAndPagedIssues" class="example-table" matSort
           matSortActive="created" matSortDisableClear matSortDirection="desc"
           (matSortChange)="resetPaging()">
      <!-- Number Column -->
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>#</th>
        <td mat-cell *matCellDef="let row">{{row.number}}</td>
      </ng-container>

      <!-- Title Column -->
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef>Title</th>
        <td mat-cell *matCellDef="let row">{{row.title}}</td>
      </ng-container>

      <!-- State Column -->
      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef>State</th>
        <td mat-cell *matCellDef="let row">{{row.state}}</td>
      </ng-container>

      <!-- Created Column -->
      <ng-container matColumnDef="created">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
          Created
        </th>
        <td mat-cell *matCellDef="let row">{{row.created_at | date}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
      </div>
    
      <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
    </div>

TS：

    /**
     * @title Table retrieving data through HTTP
     */
    @Component({
      selector: 'table-http-example',
      styleUrls: ['table-http-example.css'],
      templateUrl: 'table-http-example.html',
    })
    export class TableHttpExample implements AfterViewInit {
      displayedColumns: string[] = ['created', 'state', 'number', 'title'];
      exampleDatabase: ExampleHttpDatabase | null;
      filteredAndPagedIssues: Observable<GithubIssue[]>;
    
      resultsLength = 0;
      isLoadingResults = true;
      isRateLimitReached = false;
    
      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
    
      constructor(private _httpClient: HttpClient) {}
    
      ngAfterViewInit() {
        this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
    
        this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)
          .pipe(
            startWith({}),
            switchMap(() => {
              this.isLoadingResults = true;
              return this.exampleDatabase!.getRepoIssues(
                this.sort.active, this.sort.direction, this.paginator.pageIndex);
            }),
            map(data => {
              // Flip flag to show that loading has finished.
              this.isLoadingResults = false;
              this.isRateLimitReached = false;
              this.resultsLength = data.total_count;
    
              return data.items;
            }),
            catchError(() => {
              this.isLoadingResults = false;
              // Catch if the GitHub API has reached its rate limit. Return empty data.
              this.isRateLimitReached = true;
              return observableOf([]);
            })
          );
      }
    
      resetPaging(): void {
        this.paginator.pageIndex = 0;
      }
    }
    
    export interface GithubApi {
      items: GithubIssue[];
      total_count: number;
    }
    
    export interface GithubIssue {
      created_at: string;
      number: string;
      state: string;
      title: string;
    }
    
    /** An example database that the data source uses to retrieve data for the table. */
    export class ExampleHttpDatabase {
      constructor(private _httpClient: HttpClient) {}
    
      getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
        const href = 'https://api.github.com/search/issues';
        const requestUrl =
            `${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;
    
        return this._httpClient.get<GithubApi>(requestUrl);
      }
    }

如何在这个例子中添加过滤？我想只在客户端进行排序、过滤和分页以使其正常工作，但我认为如果有人可以解决这个问题，最好在服务器端执行此操作。

Answer 1

例如，如果您想根据单选按钮更改进行过滤，您可以：

1. 添加到您的模板：

<mat-radio-group (change)="filterChanged.emit($event)" [(ngModel)]="filterString">
    <mat-radio-button value="A">A</mat-radio-button>
    <mat-radio-button value="B">B</mat-radio-button>
</mat-radio-group>

1. 添加您的组件：

filterString = 'A';
filterChanged = new EventEmitter<MatRadioChange>();

1. 组件的变化：

this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)` 

到

this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page, this.filterChanged)

然后您可以使用this.filterString 进行服务器请求。