Предотвратить выбор мата-опции

Question

Я хочу запретить выбор опции mat, потому что при нажатии на нее откроется диалоговое окно. Моя опция должна быть выбрана только при выборе чего-либо из диалога. Если в диалоговом окне ничего не было выбрано, параметр mat не следует менять по сравнению с предыдущим значением.

<mat-select 
        [(ngModel)]="filter_defaultSelectedValue" 
        (change)="changeSelectedValue($event.value)">
   <mat-option *ngFor="let filter of filters" [value]="filter">
      <span *ngIf="filter.id != 'custom'; else content_dialog">
         {{filter.label | i18n}}
      </span>
      <ng-template #content_dialog>
         <dialog
            [filterParams] = "filter.value">
         </dialog>
      </ng-template>
   </mat-option>
</mat-select>

Мой выбор мата имеет следующие параметры: «вчера», «сегодня», «завтра», «пользовательский диапазон». Например, когда я нажимаю «вчера», он просто выбирается, но когда я нажимаю «настраиваемый диапазон», открывается диалоговое окно с календарем. Если я выбираю дату в календаре, диалоговое окно закрывается, и также выбирается опция «Пользовательский диапазон». Когда я закрываю диалоговое окно, ничего не выбирая из календаря, снова выбирается опция «Пользовательский диапазон». Я не хотел бы, чтобы этот выбор происходил, так как я ничего не выбирал из календаря. Как я могу это обусловить?

коврик-опция

Answer 1

Спасибо, это помогло мне. У меня был очень похожий вариант использования, и я использую реактивные формы. В моем приложении, если пользователь выбирает конкретное значение из коврика, выберите специальное всплывающее предупреждение с кнопками «Принять» и «Отмена». Если пользователь принимает, конкретное значение останется установленным. Но, если пользователь решит отменить, предыдущее значение должно быть установлено. Поскольку событие (valueChange) на mat-select срабатывает до обновления модели [(ngModel)], я смог сохранить предыдущее значение в свойстве компонента, называемом previousOption. Затем я привязываю другое свойство с именем currentOption к [(ngModel)] и с привязкой события (valueChanges) устанавливаю предыдущий параметр на текущий параметр. Затем вы можете подключить ваш (selectionChange) к чему угодно.

Answer 2

Мне удалось подготовить этот особый случай, изменив код ngModel "filter_defaultSelectedValue". Если внутри диалогового окна ничего не было выбрано, для ngModel установлено ранее установленное значение:

this.filter_defaultSelectedValue = this.lastSelection;

Если что-то внутри диалогового окна было выбрано, то я позволил mat-select изменить мой «filter_defaultSelectedValue» на это выбранное значение.