Question

在MatDialog组件内，来自角材料的自动完成组件无法正常工作。自动完成组件的drpodown部分不会粘贴到输入字段。

stackblitz链接-example

复制-跳转到stackblitz上方。点击“打开弹出窗口”按钮。单击“选择一个”自动完成字段。这些选项将作为下拉列表打开。然后滚动弹出菜单。请注意，“自动完成”组件的下拉部分并不遵循输入字段。我该如何解决？

Answer 1

将public class ItemRowSerializer extends JsonSerializer<ItemRow> { @Override public void serialize(ItemRow itemRow, JsonGenerator jgen, SerializerProvider serializerProvider) throws IOException { jgen.writeStartObject(); writeInnerObject(jgen, itemRow); jgen.writeEndObject(); } private void writeStringArr(JsonGenerator jgen, List items) throws IOException { jgen.writeStartArray(); for (Object arg : items) { jgen.writeString(arg.toString()); } jgen.writeEndArray(); } private void writeInnerObject(JsonGenerator jgen, ItemRow row) throws IOException { jgen.writeFieldName(row.getId()); if (row.getItems().size() > 0 && row.getItems().get(0) instanceof ItemRow) { jgen.writeStartObject(); for (int i = 0; i < row.getItems().size(); i++) { ItemRow innerRow = (ItemRow) row.getItems().get(i); if( innerRow.getItems().size() > 0 && innerRow.getItems().get(0) instanceof ItemRow ) { writeInnerObject(jgen, innerRow); } else { jgen.writeFieldName(innerRow.getId()); writeStringArr(jgen, innerRow.getItems()); } } jgen.writeEndObject(); } else { writeStringArr(jgen, row.getItems()); } } }添加到滚动div。

在app.module.ts中导入cdkScrollable
将ScrollDispatchModule添加到滚动div

cdkScrollable

Answer 2

这是因为下拉列表实际上是cdk-overlay-container的一部分，而不是matAutocomplete的一部分...仅由matAutocomplete触发，并在{{1}中呈现}，并根据用户与该字段互动时cdk-overlay-container字段的位置计算出top的位置。

重要说明：：CDK容器是透明的，并且根浏览器查看端口的完整高度和宽度覆盖了所有内容在您的应用中。

如果要将matAutocomplete input放在对话框中间，请打开，然后关闭...滚动一点，再次打开matAutocomplete ...您会注意到它在新的位置加上新计算的matAutocomplete而不是旧的......

一旦它被渲染并通过top在DOM上，就没有实时滚动事件来迫使cdk-overlay-container用滚动事件“重新计算”顶部位置。

我认为这个想法是，与自动完成通常不会在这样做时滚动... 他们正在积极寻找一个价值...一旦被选中...然后继续进行UI导航。

如果您注意到，一旦在同一个对话框中与cdk-overlay-container进行交互，则无法在打开对话框时进行滚动...我想他们这样做是因为这个特定的原因，因为它也使用了mat-select来呈现下拉列表...对于cdk-overlay-container为何表现不一样，我还不清楚。

如果将其放在组件CSS中，然后打开对话框，则可以看到对话框，并且下拉菜单是此“隐藏”容器的一部分。...甚至在打开对话框之前的自动完成功能也会暴露此容器，您可以看到下拉菜单不是红色的...但是下面的所有内容都是

matAutocomplete

有关CDK的其他信息。

https://material.angular.io/cdk/overlay/overview

Answer 3

您必须通过在项目的文件夹中执行以下命令来实现材料设计支持：

ng添加@ angular / material

Answer 4

.mat-drawer, .mat-sidenav {
  &[cdk-scrollable], &[cdkScrollable] {
    .mat-drawer-inner-container {
      overflow: visible;
    }
  }
}

只需在您的Globe SCSS文件上尝试即可。

角材料-自动完成组件下拉部分不粘在输入字段上

4 个答案: