Question

我有一个带复选框的Angular多重选择垫选择下拉列表。我使用了来自角材料网站的代码，它可以正常工作。我不希望获得所有选定下拉列表的列表或数组，而是更喜欢获得选定或未选定下拉列表的项目。那有可能吗。

这是我的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

更新

尽管我们可以选中/取消选中，但是为每个mat-select实现订阅确实很烦人。

所以这是解决方案，我创建了一个Directive，它有一个事件checkboxChanged，并且在mat-option被选中/未选中时被调用

要在您的项目中实现

1。只需将here中的文件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。获取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'}`);
 }
});

一些详细信息

如果您最初分配任何值（默认值），上述订阅也会被调用

为防止这种情况，请使用if添加matOption.isUserInput支票

别忘了退订可观察

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

Stackblitz Demo

角度材质垫选择多选下拉列表仅获取选中或未选中的项目

2 个答案:

一些详细信息