时间戳

首页 > 解决方案 > 如果 mat-select 保持“活动”状态且不可点击，如何以编程方式取消选择 mat-option

angular - 如果 mat-select 保持“活动”状态且不可点击，如何以编程方式取消选择 mat-option

问题描述

我有mat-table，里面我mat-select有mat-option。当我点击它时 - 我调用mat-dialog确认模式。当我单击取消 ( dialog.close()) 并再次尝试单击上次单击时mat-option- 它保持“活动”状态，我根本无法单击它。

如果我在mat-dialog-中单击是，mat-option则变得正常，我可以再次单击它。我认为它有些麻烦，mat-dialog因为 mat-overlay 不会触发按钮 Idk 的一些清理，但是 ==> 我如何以编程方式删除mat-active状态？mat-option

标签： angularangular-materialmat-table

解决方案

deselect()我在点击操作时通过 set 方法解决它

// inside mat-select
...
<mat-option *ngFor="let option of actionsOptions"
  #opt // <== get local scope of mat-option
  (click)="opt.deselect()"  /* <== user deselect() method to ensure deselecting
                             * within mat-dialog blocking actions.
                             */
  [value]="option.id">
  {{ option.title }}
</mat-option>
...

希望它对某人有所帮助，我没有找到有关此案例的信息，并且花了太多时间来解决 mat-table 中带有 mat-option 的这个简单错误

推荐阅读