Angular Material Mat-Select多电选择下拉列表仅获取或未选择的项目

Question

我获得了带有复选框的Angular MutiSelect Mat-Select下拉菜单。我使用了Angular Material网站上的代码，并且可以使用。我不想获取所有选定的下拉列表的列表或数组，而是要获取所选的项目或未选择的下拉项。是可能的。

这是我的HTML代码：

<mat-select multiple [(ngModel)]="myData.countries" (ngModelChange)="onEventDropDownChanged(myData, $event)"> 
<mat-option *ngFor="let country of countries" [value]="country.id" >{{country.name}}</mat-option>

在打字稿中，我可以看到参数中的内容

public onEventDropDownChanged(myData: any, event: any) {
}

如果未选中检查/选定的下拉菜单，我想获得该项目/ID。如果已选中新的下拉列表/选择，我喜欢获取新的选择项目/ID。

谢谢。

Answer 1

检查此 exmaple

  <mat-form-field>
      <mat-label>Toppings</mat-label>
      <mat-select (ngModelChange)="onEventDropDownChanged($event)" [formControl]="toppings" multiple>
        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
      </mat-select>
    </mat-form-field>
onEventDropDownChanged(i) {
console.log('Your Current Selected Item', i)
}

Answer 2

update

尽管我们能够获得检查/未选中，但要为每个mat-select实施订阅真的很烦人。

因此，这里是解决方案，我创建了一个具有事件checkboxChanged的Directive，并且在检查mat-option/未选中时将调用它。

在您的项目中实现此功能

1.简单地将文件mat-select-checkbox-changes.directive.ts从此处复制并粘贴到您的项目中并相应地导入并开始使用以下类似。

<mat-select multiple appMatSelectCheckboxChanges [(ngModel)]="selectedFood" [compareWith]="compareWith" (checkboxChanged)="checkboxChanged($event)">
 <mat-option *ngFor="let food of foods" [value]="food.value">{{food.viewValue}}</mat-option>
</mat-select>
checkboxChanged(evt: { value: Food, isChecked: boolean }) {
 console.log(`${evt.value} is ${evt.isChecked ? 'checked' : 'unchecked'}`);
}

在下面的此处添加指示代码(毫无疑问(

import { Directive, EventEmitter, Output, OnDestroy } from "@angular/core";
import { MatSelect } from "@angular/material/select";
import { Subscription } from "rxjs";
interface IMatSelectCheckboxChanges {
  value: any;
  isChecked: boolean;
}
@Directive({
  selector: "[appMatSelectCheckboxChanges]"
})
export class MatSelectCheckboxChangesDirective implements OnDestroy {
  @Output() checkboxChanged = new EventEmitter<IMatSelectCheckboxChanges>();
  subscription: Subscription;
  constructor(private matSelect: MatSelect) {
    this.subscription = this.matSelect.optionSelectionChanges.subscribe(matOption => {
        if (matOption.isUserInput) {
          this.checkboxChanged.next({ value: matOption.source.value, isChecked: matOption.source.selected });
        }
      }
    );
  }
  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

---

原始

使用optionSelectionChanges可观察的。

1.get mat-select参考

//if there is only one mat-select
@ViewChild(MatSelect) matSelect: MatSelect;
//if there are multiple, then add unique local template variables
@ViewChild('#favFood') favFoodselect: MatSelect;
@ViewChild('#favAnimal') favAnimalselect: MatSelect;

2.订阅更改

this.subscription = this.matSelect.optionSelectionChanges.subscribe(matOption => {
 if (matOption.isUserInput) {
  console.log(`${matOption.source.viewValue} is ${matOption.source.selected ? 'checked' : 'unchecked'}`);
 }
});

一些细节

如果您最初分配任何值(默认值(

，上面的订阅也将调用

因此，为了防止这种情况，请使用matOption.isUserInput

添加if检查

---

不要忘记退缩可观察

ngOnDestroy() {
 if (this.subscription) {
  this.subscription.unsubscribe();
 }
}

stackblitz demo