级联过滤器

Question

每次我从 Master Broker Company 中取消选择一个值时，它应该清除 Master Broker Name 的所有选定项目，我们该怎么做？

例如，我取消选择了公司 A，选定的标记 tapepos 或主经纪人名称下拉列表中的所有选定项目应取消选中并清除。应清除并取消选中主经纪人名称。非常感谢您的帮助，谢谢。

--->>>>>

#html代码

<div class="report-filter-container">
      <div class="report-select-container">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Master Broker Company</mat-label>
          <mat-select 
            multiple 
            #selectElemMasterBrokerCompanies
            [(value)]="reportFilter.masterBrokerCompany"
            (selectionChange)="changeFilter('masterBrokerCompany',selectAllMasterBrokerCompanies)">
            <div class="idle-report-select-all-container">
              <mat-checkbox
                #selectAllMasterBrokerCompanies
                color="primary"
                (click)="toggleAllSelectionFilter('masterBrokerCompany',selectElemMasterBrokerCompanies,selectAllMasterBrokerCompanies)">
                  Select All
              </mat-checkbox>
            </div>
            <mat-option *ngFor="let f of filters.masterBrokerCompany" [value]="f.display">
              {{f.display}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
      <div class="report-select-container">
        <mat-form-field appearance="fill" class="full-width">
            <mat-label>Master Broker Name</mat-label>
            <mat-select 
              multiple
              #selectElemMasterBrokerNames
              [(value)]="reportFilter.masterBrokerName"
              (selectionChange)="changeFilter('masterBrokerName',selectAllMasterBrokerNames)"> `
              <div class="idle-report-select-all-container">
                <mat-checkbox
                  #selectAllMasterBrokerNames
                  color="primary"
                  (click)="toggleAllSelectionFilter('masterBrokerName',selectElemMasterBrokerNames, selectAllMasterBrokerNames)">
                    Select All
                </mat-checkbox>
              </div>
              <mat-option *ngFor="let f of filters.masterBrokerName" [value]="f.display">
                {{f.display}}
              </mat-option>
            </mat-select>
          </mat-form-field>
      </div>
      <div class="report-select-container">
      </div>
    </div>
    <div class="report-filter-container">
      <div class="report-select-container">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>WAG Region</mat-label>
          <mat-select 
            multiple
            #selectElemWagRegions
            [(value)]="reportFilter.wagRegion"
            (selectionChange)="changeFilter('wagRegion',selectAllWagRegions)"> `
            <div class="idle-report-select-all-container">
              <mat-checkbox
                #selectAllWagRegions
                color="primary"
                (click)="toggleAllSelectionFilter('wagRegion',selectElemWagRegions, selectAllWagRegions)">
                  Select All
              </mat-checkbox>
            </div>
            <mat-option *ngFor="let f of filters.wagRegion" [value]="f.description">
              {{f.description}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

#ts 代码

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];
  }

  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)    
  }

Answer 1

要知道何时从 MasterBrokerName 中取消选择值，请获取对 MatSelect 组件的引用并订阅 optionSelectionChanges。然后您可以检查 selected 属性以仅过滤由取消选择操作触发的更改：

@ViewChild('selectElemMasterBrokerNames') select: MatSelect;

ngAfterViewInit() {
    this.select.optionSelectionChanges.subscribe((event) => {
      const { source, isUserInput } = event;
      if (isUserInput && !source.selected) { // Only interested in unselect actions performed by a user
        this.reportFilter.masterBrokerName = null;
      }
    });
 }

至于您在 MasterBrokerCompany 上取消选中“SelectAll”的情况，我想您可以直接在 toggleAllSelectionFilter() 函数中处理：

toggleAllSelectionFilter(
 selectProp: string,
 selectElem: MatSelect,
 selectAll: MatCheckbox
) {
    // ... All your previous code

    setTimeout(() => {
      selectAll.checked = checkSelAllOption;
      if (selectProp === 'masterBrokerCompany' && !selectAll.checked) {
        this.reportFilter.masterBrokerName = null;
      }
    }, 0);
  }

级联过滤器

cascading filters

javascript

typescript

angular-material

angular