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>

我的mat-select有以下选项：“昨天”，“今天”，“明天”，“自定义范围”。例如，当我点击“昨天”时，它就会被选中，但是当我点击“自定义范围”时，会打开一个带有日历的对话框。如果我从日历中选择日期，则会关闭对话框并选择“自定义范围”选项。当我关闭对话框而不从日历中选择任何内容时，会再次选择“自定义范围”选项。我不希望这种选择发生，因为我没有从日历中选择任何东西。我该怎么做？

mat-options

Answer 1

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

this.filter_defaultSelectedValue = this.lastSelection;

如果选择了对话框中的内容，那么我让mat-select将我的“filter_defaultSelectedValue”更改为该选定值。

Answer 2

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

如果条件为

2 个答案: