数据来自 api 的级联过滤器

Question

我正在尝试实现级联过滤器。每次来自交易类型下拉列表的用户 select 都会调用 getTransactionSubType 并根据交易类型下拉列表中的 selected 项目将是 this.payloadFilter.transactionType 用作参数从 getTransactionSubType 检索数据并显示交易子类型的数据。

现在我对下面的实现不太有信心，因为我也注意到每次更改或select交易类型的项目时交易子类型的数据都有一点延迟，这是好的解决方案还是更好的方法？

非常感谢帮助，谢谢。

#html代码

<div class="report-filter-container">
      <div class="report-select-container">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Transaction Type</mat-label>
          <mat-select 
            multiple
            #selectElemTransactionTypes
            [(value)]="reportFilter.transactionType"
            (selectionChange)="changeFilter('transactionType',selectAllTransactionTypes)"> `
            <div class="idle-report-select-all-container">
              <mat-checkbox
                #selectAllTransactionTypes
                color="primary"
                (click)="toggleAllSelectionFilter('transactionType',selectElemTransactionTypes, selectAllTransactionTypes)">
                  Select All
              </mat-checkbox>
            </div>
            <mat-option *ngFor="let f of filters.transactionType" [value]="f.name">
              {{f.name}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
      <div class="report-select-container">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Transaction Sub Type</mat-label>
          <mat-select 
            multiple
            #selectElemTransactionSubTypes
            [(value)]="reportFilter.transactionSubType"
            (selectionChange)="changeFilter('transactionSubType',selectAllTransactionSubTypes)"> `
            <div class="idle-report-select-all-container">
              <mat-checkbox
                #selectAllTransactionSubTypes
                color="primary"
                (click)="toggleAllSelectionFilter('transactionSubType',selectElemTransactionSubTypes, selectAllTransactionSubTypes)">
                  Select All
              </mat-checkbox>
            </div>
            <mat-option *ngFor="let f of filters.transactionSubType" [value]="f">
              {{f}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

嗨，我正在尝试实现一个级联过滤器，每次用户 select 来自

时，数据都来自 API.So

#Ts代码

ngOnInit(): void {
  this.getTransactionType();
  this.getTransactionSubType();
}

toggleAllSelectionFilter(selectProp: string, selectElem:MatSelect, selectAll: MatCheckbox) {    
  let isSelectAllSelected = this.isAllSelected[selectProp];
  const checkSelAllOption = !isSelectAllSelected;
  selectElem.options.forEach((item: MatOption) => (checkSelAllOption)? item.select(): item.deselect());
  this.isAllSelected[selectProp] = checkSelAllOption;   
  setTimeout(()=>{
    selectAll.checked = checkSelAllOption;
  },0)    
}

changeFilter(filterName:string, selectAll: MatCheckbox){    
  this.isAllSelected[filterName] = (this.reportFilter[filterName].length === this.filters[filterName].length);
  this.payloadFilter[filterName] = JSON.stringify(this.reportFilter[filterName]);
  selectAll.checked = this.isAllSelected[filterName];

  if(filterName === 'transactionType') {
    this.getTransactionSubType();

  }
}

getTransactionSubType(){
  let payloadFiltertransactionType = JSON.parse(this.payloadFilter.transactionType);
  this._transSubTypeService.getTransactionSubtype(this.accountName,payloadFiltertransactionType)
  .subscribe(
    res =>{                
      if (res.isSuccess) {
        this.filters.transactionSubType = res.data;
      }
    },
    err => {
      this.dialog.closeAll();
      this._notificationService.showError('Encountered an error. Please try again.');
    }
  )
}

Answer 1

因为它是您需要根据第一个下拉列表获取的动态数据，所以无论您实施什么都是好的。

是的，有改进的余地，例如：

不要预先填充事务子类型，仅当至少从第一个下拉列表中选择了一个项目时才加载。
更新第一个下拉列表后立即显示整个屏幕级别加载器，直到您获取子类型。或者您可以在下拉列表中尝试加载程序。
尝试实现缓存。

数据来自 api 的级联过滤器

cascade filters where data are from api

javascript

typescript

angular-material

angular