Mat-Select выбрать текущий выбранный вариант - PullRequest
Новая
       23

Mat-Select выбрать текущий выбранный вариант

0 голосов
/ 04 июня 2018

Мне нужно отреагировать на выбор варианта.Моя проблема заключается в том, что этот компонент не генерирует событие (вывод selectionChange не генерирует новые события), когда я выбрал опцию A, и я открываю панель выбора и снова выбираю опцию 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>

1 Ответ

0 голосов
/ 04 июня 2018

Вы можете добавить событие щелчка к вашей опции, так что функция будет вызываться, даже если эта опция уже выбрана.

<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
}

Надеюсь, это то, что вы ищете.

...