如何在 Angular 中检查 select 菜单中的更改？

Question

如何使用 openedChange 知道当您关闭或打开垫子 select 面板时，它会显示 select 框中是否有选中或未选中的项目。

现在我只能检测它是打开还是关闭，我想检测当我关闭它时是否有 activity 或 select 项目 select菜单。谢谢。

我想看看有没有变化

#html代码

 <mat-form-field class="job-filter" appearance="fill">
          <mat-select #select [formControl]="marketDropdownMultiCtrl" placeholder="Market" [multiple]="true" #marketDropdownMultiSelect (openedChange)="changeFilterEvent($event,select)">
              <mat-option>
                <ngx-mat-select-search 
                [showToggleAllCheckbox]="true" 
                accesskey="" 
                placeholderLabel="Search Market filter" 
                noEntriesFoundLabel="'No results found'" 
                (toggleAll)="toggleSelectAllMarket($event)" 
                [toogleAllCheckboxTooltipPosition]="'above'"
                [toggleAllCheckboxChecked]="marketDropdownMultiCtrl?.value?.length === marketDropdownSize" 
                [toggleAllCheckboxIndeterminate]="marketDropdownMultiCtrl?.value?.length > 0 && marketDropdownMultiCtrl?.value?.length < marketDropdownSize"
                [toggleAllCheckboxTooltipMessage]="'Select / Deselect all Market filters'" 
                [formControl]="marketDropdownMultiFilterCtrl">
              </ngx-mat-select-search>
              </mat-option>
              <mat-option *ngFor="let market of filteredMarketListMulti | async" [value]="market">
                  {{market.description}}
              </mat-option>
          </mat-select>
        </mat-form-field>

#tscode

changeFilterEvent(opened:boolean,element:any){ }

Answer 1

打开前复制marketDropdownMultiCtrl.value-

this.oldValue=marketDropdownMultiCtrl.value

关闭比较值后

if (marketDropdownMultiCtrl.value!=this.oldValues)
        ...do something..
})

如果你想在检查任何变化的同时 check/uncheck 你也可以订阅任何值。marketDropdownMultiCtrl.valueChanges using pipe pairwise

ngOnInit()
{
   this.marketDropdownMultiCtrl=new FormControl(null);
 
   this.marketDropdownMultiCtrl.valueChanges.pipe(
      //it's necesary send a first value
      startWith(this.marketDropdownMultiCtrl.value), 
      pairwise())  //the pairwise make the "magic"
       .subscribe(([old,value])=>{
          if (old!=value)
          {
              console.log("I change from "+old+" to "+value)
          }
      })

如何在 Angular 中检查 select 菜单中的更改？

How check for changes in select menu in Angular?

javascript

angular

typescript

angular-material