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

Мне нужно отреагировать на выбор варианта. Моя проблема в том, что этот компонент не генерирует событие (selectionChange output не генерирует новые события), когда я выбрал опцию A, я открываю панель выбора и снова выбираю опцию A. Событие не запускается, потому что выбор не изменяется, но в моем случае использования мне нужно запустить событие изменения выбора в этом случае. Кто-нибудь знает, как это сделать? Есть ли способ переопределить selectionModel в этом mat-select компоненте? У меня есть список ссылок, и после выбора любой из них мне нужно реагировать, даже когда пользователь снова выбирает ту же ссылку. Я использую @angular/[email protected] и @angular/[email protected].

Вот шаблон с этим компонентом, который я хочу использовать:

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

angular angular-material angular-material-5
person Marcin Kapusta    schedule 04.06.2018    source источник
comment
Используйте пустой вариант для начала или создайте свой собственный компонент. Но я даже не уверен, что HTML позволяет то, что вы хотите, я думаю, что вы не можете инициировать событие при изменении того же параметра.   -  person    schedule 04.06.2018
comment
Если вы используете [ngModel], он будет поддерживать (ngModelChange). тогда попробуйте это.   -  person windmaomao    schedule 04.06.2018
comment
Я не использую для этого никаких форм и моделей. Просто селектор ссылок для навигации. Я обновил вопрос шаблоном.   -  person Marcin Kapusta    schedule 04.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

person Emmy    schedule 04.06.2018
comment
Такое ощущение, что с выделением только с клавиатуры это не сработает. - person Marcin Kapusta; 13.06.2018
comment
Вы можете передать выбранный option в функцию, используя его следующим образом. Если option является переменной в цикле *ngFor, а в вашем примере это: (click)="myFunction(option)" - person Marcin Kapusta; 13.06.2018