如果有条件，防止选择垫选项

Question

我想防止选择mat-option，因为单击它会打开一个对话框。 仅当从对话框中选择某项时，才应选择我的选项。 如果未从对话框中选择任何内容，则不应将mat-option更改为先前的值。

<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

我设法通过更改代码中的ngModel“ filter_defaultSelectedValue”来处理这种特殊情况。 如果在对话框中未选择任何内容，则将ngModel设置为某个先前设置的值：

this.filter_defaultSelectedValue = this.lastSelection;

如果选择了对话框中的某些内容，则可以让mat-select将“ filter_defaultSelectedValue”更改为该选定值。

Answer 2

谢谢，这对我有帮助。 我有一个非常相似的用例，并且正在使用反应形式。 在我的应用程序中，如果用户从垫子中选择特定值，请选择“接受”，“取消”按钮，显示一个特殊的警告弹出窗口。 如果用户接受，则特定值将保持不变。 但是，如果用户选择取消，则应设置先前的值。 由于在更新模型[(ngModel)]之前触发了mat-select上的(valueChange)事件，因此我能够将先前的值存储在名为previousOption的组件属性中。 然后，我将另一个名为currentOption属性绑定到[(ngModel)]并使用事件绑定(valueChanges)将前一个选项设置为当前选项。 然后，您可以连接(selectionChange)以执行任何操作。