我想使用角度显示基于过滤器值的表格内容

Question

我希望在使用angular触发点击事件后根据输入值填充表格内容。

component.html

<mat-card>  
<div class="alert alert-info">  
  <strong>Distributor Order List</strong>  
</div>
<div class="box-body">
<div class="main-login main-center">
  <form  class="example-form">       

    <mat-form-field class="example-full-width">
      <input matInput placeholder="Dealer Name" #fromdate>
    </mat-form-field>

    <mat-form-field class="example-full-width">
      <input matInput placeholder="Dealer Phone" #todate>          
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <mat-select  id="family_relation" placeholder="Distributor Name" 
 #distributor>
        <mat-option *ngFor="let distributor of distributors" 
 [value]="distributor.id">
          {{distributor.company_name}}
        </mat-option>
      </mat-select>          
    </mat-form-field>
    <button mat-raised-button color="primary" 
  (click)="filtertable(fromdate.value,todate.value,distributor.value)" 
  >Search</button>
  </form>
  </div>

  </div>
  <button mat-raised-button [routerLink]="['/admin/active-dealer/create']" 
 class="pull-right" color="primary">Add</button>
 <mat-form-field>
      <input matInput class="example-full-width" 
 (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>  

  <div class="example-container mat-elevation-z8" #TABLE>

  <mat-table #Table [dataSource]="MyDataSource" matSort>  

 <!-- For ID -->  
 <ng-container matColumnDef="slno">  
 <mat-header-cell *matHeaderCellDef mat-sort-header> Sl No. </mat-header- 
 cell>  
 <mat-cell *matCellDef="let post;  let i = index;"> {{i+1}} </mat-cell>  
 </ng-container>  



  <!-- For Title -->  
 <ng-container matColumnDef="Date">  
<mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>  
<mat-cell *matCellDef="let post"> {{post.Date}} </mat-cell>  
</ng-container>  

<!-- For Body -->  
<ng-container matColumnDef="Order_no">  
<mat-header-cell *matHeaderCellDef mat-sort-header> Order No. </mat-header- 
cell>  
<mat-cell *matCellDef="let post"> {{post.Order_Number}} </mat-cell>  
 </ng-container>

<ng-container matColumnDef="Distributor">  
<mat-header-cell *matHeaderCellDef mat-sort-header> Distributor </mat- 
header-cell>  
<mat-cell *matCellDef="let post"> {{post.Company_Name}} </mat-cell>  
</ng-container>

<ng-container matColumnDef="Receive Date">  
<mat-header-cell *matHeaderCellDef mat-sort-header> Receive Date </mat- 
header-cell>  
<mat-cell *matCellDef="let post"> {{post.receive_Date}} </mat-cell>  
</ng-container>
<ng-container matColumnDef="Qty">  
<mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</mat-header- 
cell>  
<mat-cell *matCellDef="let post"> {{post.Total_Quantity}} </mat-cell>  
</ng-container>
<ng-container matColumnDef="Price">  
<mat-header-cell *matHeaderCellDef mat-sort-header> Price </mat-header-cell>  
<mat-cell *matCellDef="let post"> {{post.Total_Price}} </mat-cell>  
</ng-container>

<ng-container matColumnDef="Status">  
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>  
<mat-cell *matCellDef="let post"> {{post.Order_Status}} </mat-cell>  
</ng-container>

<ng-container matColumnDef="action">  
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>  
  <mat-cell *matCellDef="let post">  
          <a [routerLink]="['/admin/active-dealer/edit', post.order_id]"> 
<button mat-mini-fab color="primary"><mat-icon matSuffix>mode_edit</mat- 
icon></button></a>                
  </mat-cell>  
</ng-container> 

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>  
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>


<mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" 
showFirstLastButtons>  
</mat-paginator>
</div> 

</mat-card>

在这里，我首先绑定了该表中的所有记录，现在我想根据表单值过滤该表的内容。

component.ts

import { Component, OnInit,ViewChild } from '@angular/core';
import { MatTableDataSource,MatPaginator,MatSort } from '@angular/material';
import { OrdersService } from '../../services/orders.service';
import { DistributorService } from '../../services/distributor.service';

@Component({
selector: 'app-distributors-order',
templateUrl: './distributors-order.component.html',
styleUrls: ['./distributors-order.component.css']
})
export class DistributorsOrderComponent implements OnInit {
MyDataSource: any;  
displayedColumns = ['slno','Date','Order_no','Distributor','Receive 
Date','Qty','Price','Status','action'];
error: string;
distributors: any;

constructor(private orderservice: OrdersService,private distributorservice: 
DistributorService) { }
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

applyFilter(filterValue: string) {
this.MyDataSource.filter = filterValue.trim().toLowerCase();
}


ngOnInit() {
this.RenderDataTable();
this.getdistributor();
}
RenderDataTable() {  
this.orderservice.get_pending_orders()  
  .subscribe(  
  res => {  
    this.MyDataSource = new MatTableDataSource();  
    this.MyDataSource.data = res;
    this.MyDataSource.sort = this.sort;
    this.MyDataSource.paginator = this.paginator;
  },  
  error => {  
    console.log('There was an error while retrieving Posts !!!' + error);  
  });  
  }
getdistributor(){ 
this.distributorservice.getDistributor()
        .subscribe(
          distributors => {
                this.distributors = distributors;
                //console.log('this.distributors=' + 
     this.distributors[0].company_name);                    
            }, //Bind to view
                        err => {
                    // Log errors if any
                    console.log(err);
                })
  }
  filtertable(from,to,dis){
  console.log(from);
  } 
  }

这里我有fire filtertable（）并想过滤表内容。

service.ts

import { Injectable } from '@angular/core';
import { Order } from '../models/order';
import { HttpClient,HttpErrorResponse } from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from '../../environments/environment';

@Injectable({
providedIn: 'root'
})
export class OrdersService {
serverUrl = environment.baseUrl;
constructor(private http: HttpClient) { }
get_pending_orders() {
return this.http.get<Order>(this.serverUrl + 
'adminapi/get_pending_orders').pipe(
  catchError(this.handleError)
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
  console.error('An error occurred:', error.error.message);
} else {
  console.error(`Backend returned code ${error.status}, ` + `body was: 
${JSON.stringify(error.error)}`);
}
return throwError('Something bad happened. Please try again later.');
}
}