Как отфильтровать таблицу, используя несколько установленных значений

Question

У меня есть угловая 7 Mat-Data-Table, которую я использую, чтобы показать данные, которые я получаю от API. Я хочу использовать 3 параметра, которые я получаю от клиента, и я сохраняю их в значения, используя снимок. проблема, с которой я сейчас сталкиваюсь, заключается в том, как мне сделать так, чтобы таблица была отфильтрована по выбору клиента в NgOninit.

Это мой компонент:

export class ContainersPageComponent implements OnInit {

  tableColumn = ['AITOR','SOG_MCOLH','GOBH_MCOLH','AORKH_MCOLH','MCOLH_N7','MCOLH_AAAA', 'TAOR_QTSR_EBRI','QOD_MCHSN','STTOS_RASHI_4_1',
'LQOCH_SHM_MQOTSR_EBRI','LQOCH_SHM_LOEZI_QTSR','LQOCH_QOD_LQOCH'];

  p :number = 1;
  dataSource : any = new MatTableDataSource;
  public show:boolean = false;
  public tableHide:any = 'Show';
  searchText: string = "";
  autoFilter : any;
  clientType : string;
  storageType: any;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;


  filterCheckboxes: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);

  constructor(private marinService:MarinServiceService,private route: ActivatedRoute) { }

  ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {
     //Data
      this.dataSource = new MatTableDataSource(result);
      //Paginator
      this.dataSource.paginator = this.paginator;
      //AutoFilter Form 1st page
      this.clientType = this.route.snapshot.queryParamMap.get('clientType');
      this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
      console.log('The Client name is : '+this.clientType+'  '+'The storage Facility is : '+this.storageType);
      //CheckBox Filter
      this.dataSource.filterPredicate = (data: Container, filter: any) => {
        return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
      };
      this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
        this.dataSource.filter = newFilterValue.join(',');
      });

    });
  }



  toggle(){
    this.show = !this.show;

    if(this.show) {
      this.tableHide = "Hide";
    } else {
      this.tableHide = "Show";
    }
  }

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

  public getRowsValue(flag) {
    if (flag === null) {
      return this.dataSource.length;
    } else {
      return this.dataSource.filter(i => (i.state == flag)).length;
    }
  }

  addFilter(change: MatCheckboxChange) {
    if (this.filterCheckboxes.value.some((a: any) => a === change.source.value)) {
      this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: any) => a !== change.source.value));
    } else {
      this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
    }
  }
}

Это мой HTML:

<div>
    <mat-table [dataSource]="dataSource"  [hidden]="!show" matSort >
      <!-- Location  -->
      <ng-container matColumnDef="AITOR">
        <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
        <mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
      </ng-container>
          <!-- Type  -->
          <ng-container matColumnDef="SOG_MCOLH">
            <mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
            <mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
          </ng-container>
              <!-- Height  -->
              <ng-container matColumnDef="GOBH_MCOLH">
                <mat-header-cell *matHeaderCellDef> Container Height </mat-header-cell>
                <mat-cell *matCellDef="let container"> {{container.GOBH_MCOLH}} </mat-cell>
              </ng-container>    
              <!-- Length  -->
              <ng-container matColumnDef="AORKH_MCOLH">
              <mat-header-cell *matHeaderCellDef> Container Lenght </mat-header-cell>
              <mat-cell *matCellDef="let container"> {{container.AORKH_MCOLH}} </mat-cell>
              </ng-container> 
               <!-- Number  -->
               <ng-container matColumnDef="MCOLH_N7">
                <mat-header-cell *matHeaderCellDef> Container Number </mat-header-cell>
                <mat-cell *matCellDef="let container"> {{container.MCOLH_N7}} </mat-cell>
                </ng-container> 
                    <!-- Name AAAA  -->
                    <ng-container matColumnDef="MCOLH_AAAA">
                      <mat-header-cell *matHeaderCellDef > Container Name </mat-header-cell>
                      <mat-cell *matCellDef="let container"> {{container.MCOLH_AAAA}} </mat-cell>
                      </ng-container>  
                     <!-- QTSR Hebrow  -->
                     <ng-container matColumnDef="TAOR_QTSR_EBRI">
                     <mat-header-cell *matHeaderCellDef> Storage Site </mat-header-cell>
                     <mat-cell *matCellDef="let container"> {{container.TAOR_QTSR_EBRI}} </mat-cell>
                     </ng-container>   
                                  <!-- Storage Code  -->
                                  <ng-container matColumnDef="QOD_MCHSN">
                                    <mat-header-cell *matHeaderCellDef> Storage Code </mat-header-cell>
                                    <mat-cell *matCellDef="let container"> {{container.QOD_MCHSN}} </mat-cell>
                                    </ng-container>
                                 <!-- Status  -->
                                  <ng-container matColumnDef="STTOS_RASHI_4_1">
                                    <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
                                    <mat-cell *matCellDef="let container"> {{container.STTOS_RASHI_4_1}} </mat-cell>
                                    </ng-container>      
                                  <!-- MQOTSR Hebrow  -->
                                  <ng-container matColumnDef="LQOCH_SHM_MQOTSR_EBRI">
                                    <mat-header-cell *matHeaderCellDef> Customer MQOTSR </mat-header-cell>
                                    <mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_MQOTSR_EBRI}} </mat-cell>
                                    </ng-container>
                                  <!-- MQOTSR Hebrow  -->
                                  <ng-container matColumnDef="LQOCH_SHM_LOEZI_QTSR">
                                    <mat-header-cell *matHeaderCellDef> ESN </mat-header-cell>
                                    <mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_LOEZI_QTSR}} </mat-cell>
                                    </ng-container>
                                  <!-- MQOTSR Hebrow  -->
                                  <ng-container matColumnDef="LQOCH_QOD_LQOCH">
                                    <mat-header-cell *matHeaderCellDef> Code Customer </mat-header-cell>
                                    <mat-cell *matCellDef="let container"> {{container.LQOCH_QOD_LQOCH}} </mat-cell>
                                    </ng-container>            

    <!--Row Maker-->
      <mat-header-row *matHeaderRowDef="tableColumn"></mat-header-row>
      <mat-row *matRowDef="let row; columns: tableColumn;" ></mat-row>
    </mat-table>
    </div>

Я пытался использовать трубы, но на самом деле я их не понимаю.

Answer 1

Вы сказали, что хотите прочитать три значения из snapshot, но ваш пример кода показывает два. Также не ясно, как данные, считанные с snapshot, относятся к фильтрам. Я сделал предположение, что два поля, которые вы сохранили - это те, которые нужно отфильтровать.

По сути, вы присваиваете dataSource.filter начальное значение, так как BehaviourSubject не имеет ничего для излучения.

...

 ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {

      ...

      // get snapshot data
      this.clientType = this.route.snapshot.queryParamMap.get('clientType');
      this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
      console.log('The Client name is : '+this.clientType+'  '+'The storage Facility is : '+this.storageType);

      ...

      this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
        this.dataSource.filter = newFilterValue.join(',');
      });

      // set the filter to the dataSource
      this.dataSource.filter = ` ${this.clientType},${this.storageType}`;

      // Make changes to UI to reflect the filter
      // ....
    });
  }

Вы также можете позвонить next() на BehaviourSubject внутри ngOnInit, чтобы установить фильтр

...

 ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {

      ...

      // get snapshot data
      this.clientType = this.route.snapshot.queryParamMap.get('clientType');
      this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
      console.log('The Client name is : '+this.clientType+'  '+'The storage Facility is : '+this.storageType);

      ...

      this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
        this.dataSource.filter = newFilterValue.join(',');
      });

      // set the filter via the filterCheckbox
      this.filterCheckboxes.next([this.clientType, this.storageType]);

      // Make changes to UI to reflect the filter
      // ....
    });
  }