防止 mat-option 选择 if 条件

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

谢谢，这对我有帮助。我有一个非常相似的用例，并且我正在使用反应式表单。在我的应用程序中，如果用户从 mat-select 中选择特定值，则会显示一个带有“接受”、“取消”按钮的特殊警告弹出窗口。如果用户接受，特定值将保持设置。但是，如果用户选择取消，则应设置先前的值。由于 mat-select 上的

(valueChange)

事件在模型

[(ngModel)]

更新之前触发，我能够将先前的值存储在名为

previousOption

的组件属性中。然后，我将另一个名为

currentOption

的属性数据绑定到

[(ngModel)]

，并通过事件绑定

(valueChanges)

将上一个选项设置为当前选项。然后你就可以连接你的

(selectionChange)

来做任何事情。

Answer 3

如果您仍然将该代码保存在 GitHub 之类的地方，可以分享一下吗？我正在尝试实现类似的东西，但我对 Angular 很陌生。预先感谢您！