如何在 mat-select angular 7 中嵌套 mat-option答案

【问题标题】：how to have nested mat-option in mat-select angular 7如何在 mat-select angular 7 中嵌套 mat-option
【发布时间】：2019-12-28 11:28:07
【问题描述】：

我有 mat-select 和 mat-datepicker。在 mat-select 中有 3 个选项。当我单击第 3 个（自定义）选项时，它必须显示 datepicker，而不关闭 mat-select 面板。要实现这一点，有任何插件。

编辑：

      <mat-form-field>
        <mat-select [(value)]="selectedOption" (selectionChange)="onSelectChange($event.value,$event)" placeholder="Date Range">

          <mat-option [value]="'Last 24 hours'">Last 24 hours               
          </mat-option>
          <mat-option [value]="'Last 7 days'">Last 7 days
          </mat-option>           

          <mat-option [value]="'Custom'">Custom
            <mat-select>
              <mat-option>
                <mat-form-field>
                  <input matInput [matDatepicker]="picker1">
                  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                  <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>
              </mat-option>
            </mat-select>



        </mat-select>
      </mat-form-field>

单击自定义时，它会显示日期选择器选择。但父垫选择会在选择自定义选项时关闭

【问题讨论】：

解释预期的行为以及您尝试这样做的原因！
您确定您的要求吗？我的意思是：“必须显示日期选择器”非常简单，您只需要在日期选择器上添加一个*ngIf="selectedOption === 'Custom'"。但是“不关闭地图选择面板”对我来说没有意义。
@A.Chiesa 您正确的 .last time 日期选择器单独显示，即当我单击自定义选项日期选择器时显示。
我不确定你的最后一句话。我的意思是：为什么像``` ``` 在 mat-select 之外 不行吗？ mat-select 具有预期的行为，仅用于在单击时选择项目。不费吹灰之力就无法将其他控件放入其中。
@A.Chiesa 我想在 mat-select 中将 datepicker 显示为 mat-option。

标签： typescript angular-material angular7

【解决方案1】：

您应该使用menu 而不是select。

见this example。

【讨论】：