Question

我需要对选项选择做出反应。我的问题是当我选择了选项A时，此组件没有发出事件（selectionChange输出没有发出新事件），我打开选择窗格并再次选择选项A.事件没有被触发，因为选择没有改变，但在我的用例中我需要在这种情况下触发选择更改事件。有人知道怎么做吗？有没有办法覆盖此selectionModel组件中的mat-select？我有一个链接列表，在选择其中任何一个后，即使用户再次选择相同的链接，我也需要做出反应。我正在使用@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
}

希望这就是你要找的东西。

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

1 个答案: