Question

我有一个相关组中的项目列表。我查看了“角度/材质”选择组件，但是值列表太长。理想情况下，它们将显示在多选控件中的可折叠组中。

我决定尝试将 mat手风琴> mat-expansion-panel 与 mat-select Multiple 结合起来。总体功能正是我要实现的，但是在控件加载时 FIRST 出现了渲染问题。

在最初打开下拉菜单时，所有面板均已关闭且功能正常。当控件在 FIRST 时间失去焦点时，所有面板似乎都将自动展开。仔细检查后，面板将“关闭”，但多选值会在折叠面板的外部呈现。一旦我第二次打开控件并手动打开和关闭面板，此后它们便会正常运行，其值位于折叠面板的“内部”，而与选择或失去焦点无关。

有人对如何解决此问题有任何建议吗？会是CSS吗？

此处的示例：stackblitz

<mat-form-field>
  <mat-select placeholder="Text" [formControl]="myControl" multiple>
    <mat-accordion displayMode="flat">
      <mat-expansion-panel *ngFor="let group of myGroups">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ group.name }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-option *ngFor="let item of group.item" [value]="item.value">
          {{ item.viewValue }}
        </mat-option>
      </mat-expansion-panel>
    </mat-accordion>
  </mat-select>
</mat-form-field>

为什么值出现在mat-expansion-panel之外？

0 个答案: