在角度材料保管箱中选择选项时如何调用函数？答案

【问题标题】：How to call a function when select an option in angular material dropbox?在角度材料保管箱中选择选项时如何调用函数？
【发布时间】：2020-12-24 05:55:26
【问题描述】：

当我使用角度材料垫选择时，我想调用一个函数来控制台记录所选项目的名称。但是为什么控制台会记录当前的和前一个呢？这些是我的代码：

<mat-form-field appearance="fill" style="margin-top: 1rem; width: 100px;">
    <mat-label>Groups</mat-label>
         <mat-select>
              <mat-option *ngFor="let name of groupNames" [value]="name 
                 (onSelectionChange)="getActivitiesInGroup(name)">
                    {{ name }}
              </mat-option>
         </mat-select>
</mat-form-field>

groupNames = ['A','D','T','C']
getActivitiesInGroup(name: string): void {
        console.log(name);
}

所以我先选择'A'和condole log'A'，然后我选择'T'，为什么控制台先记录'T'然后再记录'A'？如何让控制台在第二次选择期间只记录“T”？

【问题讨论】：

标签： javascript html angular select angular-material

【解决方案1】：

您使用的是哪个 Angular 版本？

Angular 6+：

您应该在mat-select 上使用selectionChange 事件而不是mat-option：

<mat-select name="countryString" [(value)]="selectedCountry" (selectionChange)="onSelectionChange(selectedCountry)"
  placeholder="Country">
  <mat-option [value]="'GB'">Great Britain</mat-option>
  <mat-option [value]="'US'">United States</mat-option>
  <mat-option [value]="'CA'">Canada</mat-option>
</mat-select>

stackblitz 演示：

https://stackblitz.com/edit/angular-mat-select-example-vqnv8h?file=src/app/app.component.html

【讨论】：