mat-select（Angular Material）：当用户选择默认值时，selectionChange 不会触发

Question

（可能是重复的，但找不到与此特定问题有关的问题）

使用 Angular 13 和 Angular-Material 13.3.9。 我实现了一个简单的 mat-select 来选择过滤器（全部、每月、每年和创建者）。 mat-select 提供一个预选值，即每月。 每当用户更改 mat-selects 值时，selectionChange EventEmitter 就会触发一个事件，到目前为止它工作正常 - 除了一个问题：

每当用户选择不同的值（例如每年），然后再次选择预选值（每月）时，不会触发 selectionChange 事件。

为什么？ 在这种特定情况下，我怎样才能让事件触发？

已经测试过：

• 尝试使用其他预选值，例如每年。 问题与每月相同，但是当用户再次选择每年时，当然不会触发该事件。
• 硬编码 mat-options 并没有改变行为。
• 删除翻译管道只是为了确保它不会干扰并没有改变行为。

.html：

<mat-form-field appearance="fill">
  <mat-label>{{ 'filterprojects.showas' | translate }}</mat-label>
  <mat-select [(value)]="selectedMainFilter.value" (selectionChange)="onMainFilterChange()">
    <mat-option [value]="option.value" *ngFor="let option of mainFilters">{{ 'filterprojects.' + option.viewValue | translate }}</mat-option>
  </mat-select>
</mat-form-field>

.ts

@Component({
  selector: 'app-filterprojects',
  templateUrl: './filterprojects.component.html',
  styleUrls: ['./filterprojects.component.css']
})
export class FilterprojectsComponent implements OnInit {

  //Filter-Values
  mainFilters: MainFilterElement[] = [
    { value: 'all', viewValue: 'filterall' },
    { value: 'yearly', viewValue: 'filteryearly' },
    { value: 'monthly', viewValue: 'filtermonthly' },
    { value: 'creator', viewValue: 'filtercreator' }
  ];

  selectedMainFilter: MainFilterElement = this.mainFilters[2]; //Select the Monthly-Filter by default
  
  public onMainFilterChange() {
    console.log("Hi! I will not be fired, if the monthly-mainFilter is selected by the user.");
  }
}

Answer 1

在组件而不是模板内分配selectedMainFilter值

selectedMainFilter: string = this.mainFilters[2].value;

并在模板中使用

<mat-select [(value)]="selectedMainFilter" ...

现在您可以获得选定的值

onMainFilterChange() {
 console.log(this.selectedMainFilter)
}