Mat-Select 选择当前选择的选项

Question

我需要对选项选择做出反应。我的问题是，当我选择选项 A 时，此组件未发出事件（selectionChange 输出未发出新事件），然后我打开选择窗格并再次选择选项 A。该事件未触发，因为选择未更改，但我需要在我的用例中触发选择更改事件。有人知道该怎么做吗？有没有办法在这个mat-select 组件中覆盖selectionModel？我有一个链接列表，选择其中任何一个后，即使用户再次选择相同的链接，我也需要做出反应。我正在使用@angular/core@5.2.5 和@angular/material@5.2.1。

这是我要使用的带有此组件的模板：

<mat-form-field>
    <mat-select placeholder="Search history"
        [disabled]="(links | async).length === 0"
        [value]="(links | async).length > 0 ? (links | async)[0] : null"
        (selectionChange)="onSearchHistorySelect($event.value)">
        <mat-option *ngFor="let l of links | async" [value]="l">{{l.title}}</mat-option>
    </mat-select>
</mat-form-field>

Answer 1

您可以为您的选项添加一个点击事件，因此即使该选项已被选中，该函数也会被调用。

<mat-form-field>
    <mat-select [(ngModel)]="status">
      <mat-option *ngFor="let option of options" [value]="option.value (click)="myFunction()">
        {{ option.name }}
      </mat-option>
    </mat-select>
</mat-form-field>

我发现的唯一问题是您不能将所选选项的值赋予函数（或者至少我没有找到方法）。但是您可以通过使用 ngModel 将值绑定到类中的属性来解决此问题。

然后在你的函数中你可以调用这个属性（在我的例子中是 this.status）。

myFunction() {
  console.log(this.status);  // Do stuff with your selected value
}

希望这是您正在寻找的。​​p>