两个垫子表过滤器在角度8

时间:2020-03-20 11:02:43

标签: angular8

当我尝试在同一组件上实现两个具有所有功能(如过滤器,分页和排序)的席子表时。但在第二个垫子表过滤器不起作用。 这是我的.html代码

     <mat-form-field>
            <input matInput (keyup)="applyFilterOne($event.target.value)" placeholder="Filter"  />
      </mat-form-field>
     <table mat-table matSort [dataSource]="dataSourceOne" #TableOneSort="matSort"class="mat-elevation-z8" style="width: 100%;" >      
          </table>     
          <mat-paginator
            #TableOnePaginator="matPaginator"
            [pageSize]="3"
            [pageSizeOptions]="[5, 10, 25, 100]"
          ></mat-paginator>

          <mat-form-field>
            <input
              matInput
              (keyup)="applyFilterTwo($event.target.value)"
              placeholder="Filter"
            />
          </mat-form-field>
          <table
            mat-table
            matSort
            [dataSource]="dataSourceTwo"
            #TableTwoSort="matSort"
            class="mat-elevation-z8"
            style="width: 100%;"
          >

          </table>

          <mat-paginator
            #TableTwoPaginator="matPaginator"
            [pageSize]="3"
            [pageSizeOptions]="[5, 10, 25, 100]"
          ></mat-paginator>
        </div>

这是.ts文件代码

       ngOnInit() {
        this.dataSourceOne.paginator = this.tableOnePaginator;
        this.dataSourceOne.sort = this.tableOneSort;     
        this.dataSourceTwo.paginator = this.tableTwoPaginator;
        this.dataSourceTwo.sort = this.tableTwoSort;

        this._orderDetailsServices.getOrderDetails().subscribe(r =>{console.log(r);
          this.users = r.orderItemsResponces;
          this.dataSourceOne = new MatTableDataSource(this.users);
          this.dataSourceOne.paginator = this.tableOnePaginator;
          this.dataSourceOne.sort = this.tableOneSort;
        });

        this._orderDetailsServices.getAllOrderUserDetails().subscribe(r =>{console.log(r);
          this.orderitem=r.orderResponces;  
          this.dataSourceTwo = new MatTableDataSource(this.orderitem);
          this.dataSourceTwo.paginator = this.tableTwoPaginator;
          this.dataSourceTwo.sort = this.tableTwoSort;         
        });
      }

      applyFilterOne(filterValue: string) {
        this.dataSourceOne.filter = filterValue.trim().toLowerCase();
      }

      applyFilterTwo(filterValue: string) {
        this.dataSourceTwo.filter = filterValue.trim().toLowerCase();
      }

在这里,两个File code。一个是.html,另一个是.ts文件代码。 我正在使用mat表在角度8中显示Web.api数据的数据。

0 个答案:

没有答案