程序员经验分享-hwhale

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

2024-01-22

角度材料的自动完成组件在 MatDialog 组件内未按预期工作。自动完成组件中的 drpodown 部分不会粘贴到输入字段。

堆栈闪电战链接 -example https://stackblitz.com/edit/angular-s698hp

重现 - 转到 stackblitz 上面。单击“打开弹出窗口”按钮。单击“选择一个”自动完成字段。这些选项将以下拉菜单形式打开。然后滚动弹出窗口的 bodu。请注意，自动完成组件的下拉部分不会粘在输入字段上。我该如何解决？


这是因为下拉菜单实际上是cdk-overlay-container并且不属于matAutocomplete...仅由触发matAutocomplete被渲染在cdk-overlay-container，计算出top位置基于的放置matAutocomplete input用户与字段交互时的字段。

重要的提示：CDK容器是透明的，根浏览器视图端口的完整高度和宽度，覆盖所有内容 在你的应用程序中。

如果你要这么说matAutocomplete在对话框中间，打开，然后关闭...稍微滚动位置，打开matAutocomplete再次...您会注意到它使用新计算的值呈现在新位置top而不是旧的......

一旦它被渲染并通过以下方式出现在 DOM 上cdk-overlay-container但是，没有实时滚动事件来强制cdk-overlay-container使用滚动事件“重新计算”顶部位置。

我认为这个想法是与交互的用户 自动完成功能通常不会在执行此操作时滚动... 他们正在积极寻找一个价值...一旦选择...他们然后 继续进行 UI 导航。

如果您注意到，一旦您与mat-select在同一个对话框中，您无法在打开时滚动...我认为他们这样做是出于这个特定原因，因为它也使用了cdk-overlay-container渲染下拉菜单...我不太清楚为什么matAutocomplete行为不一样。

如果你把它放在你的组件CSS中，然后打开你的对话框，你可以看到对话框和下拉菜单是这个“隐藏”容器的一部分......甚至打开对话框之前的自动完成也会暴露这个容器，你可以看到下拉菜单不是红色的...但它下面的所有内容都是红色的。

::ng-deep .cdk-overlay-container{
  background-color: #ff000087;
}

有关 CDK 的更多信息请参见此处。

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

angularmaterial

角度材料 - 自动完成组件下拉部分不粘在输入字段上 的相关文章

  • 如何在 Angular 2 中处理 200 以外的 http 状态码

    现在我做http请求的方式 借用这个答案 https stackoverflow com a 34758630 4937981 这是 POST url data var headers new Headers authtoken local

  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ？

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty

  • 无法从角度路由器获取路径或 url

    我无法从 ActivatedRoute 或 Router 导入中获取 URL 或路径 它为路径 输出空白 为 URL 输出 我记得使用的是工作版本 唯一捕获正确路由的是Router events 我也无法订阅ActivatedRoute 中

  • 如何为 Angular 4、5 中的动态元素分配哈希 ID ref id

    如果我的问题很愚蠢 我很抱歉 我有 30 多个静态 ng container 和一些独特的静态 hashtagID 但我想在 ngFor 的帮助下动态创建它们 public lists food book cook 期望输出

  • 通过innerHTML输入时span不应用css样式

    我有 Angular 应用程序 作为它的一部分 我在 div 中显示查询结果 具有 JSONContainer 的 ID 我想突出显示结果中的特定查询 因此我使用了一个管道来搜索结果 并将文本中的 FIELD VALUE 替换为 span

  • ionic2 对菜单项应用 ngx-translate

    我正在使用 ngx translate 来支持多语言 并且运行良好 但我也想申请菜单项 我该如何实现这一目标 我有 3 个菜单项 我想更改每个标题的语言 ts file appPages PageObj title Profile comp

  • 更改 ag-grid 上的页面和缓存块大小会导致项目无限加载

    我希望使用 ag grid 的 服务器端 模式重新获取每个页面的数据 为了做到这一点 我将 maxBlocksInCache 1 和 cacheBlockSize 设置为等于每页的项目数 到这里为止一切正常 现在 当我更改每页的项目数时 网

  • 为什么 Angular 2 ngOnChanges 不响应输入数组推送

    我的角度应用程序遇到了问题 我使用输入作为数组 并在单击事件发生时将值推送到数组 但是当数组推送完成时 ngOnChanges 不会触发 有没有办法触发 ngOnChange 我的代码是 ts 文件是 Component selector

  • 如何从 Angular 7 中的另一个组件更新视图？

    我想从导航栏刷新我的卡集 该导航栏是应用程序组件 html所以我准备了刷新 功能 当它被调用时 它会更新变量 Cards 但不会将其呈现在ngFor在 html 元素上mainView html 如果我从 html 元素调用 它会渲染更新的

  • 拖动元素时是否禁用 mousemove 事件？

    我试图通过在拖动元素时观察文档上的 mousemove 事件来移动元素 使用 html5 拖放 我在文档的父元素上添加了一个 mousemove 侦听器 每当我移动鼠标时都会触发该监听器 但是一旦我开始拖动另一个子元素 我就不再看到 mou

  • 如何在Angular2中正确使用依赖注入（DI）？

    我一直在试图弄清楚 DI 依赖注入在 Angular2 中是如何工作的 每次当我尝试将服务 或类注入我的组件时 我都会遇到很多问题 从不同的谷歌搜索文章中 我需要使用providers 在组件配置中 或者有时我需要使用 Inject 在我的

  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一

  • 如何让Angular2绑定innerHTML中的组件

    我想创建一个组件myApp它将把控制器上的属性中的 HTML 嵌入到其模板中 但是 其中一些 HTML 可能包含其他组件选择器 import InfoComponent from Component selector myApp templ

  • 如何使用 Angular 2 修改 ng-bootstrap 轮播的 CSS

    最近 我尝试修改 ng bootstrap carousel 组件中的 carousel item 类 但是 我发现我需要在元数据中添加 encapsulation ViewEncapsulation None 使用此解决方案还会更改其他轮

  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has

  • 在哪里存储角度中的 JWT 令牌？

    我正在使用 Django 和 Angular 构建一个应用程序 目前 我正在本地存储上存储后端发出的 JWT 但是 我担心 XSS 攻击 我应该使用仅 HTTP 的 cookie 来存储令牌吗 我还考虑将令牌存储在我的身份验证服务类中的变量

  • 对预检请求的响应未通过访问控制检查：响应中“Access-Control-Allow-Credentials”标头的值为“”

    我正在 Angular 6 和 asp net core 上使用 SignalR 功能 但不断收到此错误对预检请求的响应未通过访问控制检查 响应中 Access Control Allow Credentials 标头的值为 当请求的凭据模

  • 模板解析：找不到管道

    我收到错误 模板解析错误 找不到管道 amDateFormat 这是我的app module ts import NgModule from angular core import MomentModule from angular2 mo

  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c

  • 如何在 Angular 4 中翻译 mat-paginator？

    你知道如何在 Angular 中翻译 每页项目 吗mat paginator标签 这mat paginator是材料设计中的一个元素 您可以使用MatPaginatorIntl为了这 威尔 豪厄尔制作 https github com an

随机推荐

  • Java中如何从另一个类获取类的特定实例？

    我创建了以下课程main方法 它创建新的实例Application和实例ApplicationModel ApplicationView and ApplicationController对于这个特殊的Application public

  • Shiny 应用程序中的“read_excel”

    我有一个闪亮的应用程序 使用read xlsx包中的函数xlsx 一切正常 但我想改为read excel from readxl 希望它会更快并且能够应对大文件 ui part fileInput inputFile Upload fil

  • 手部检测 Opencv

    我正在尝试使用 OpenCV 和 C 检测手 我能够找到图像中存在人手的手的轮廓 正图像 基本上我找到最大的轮廓并将其视为手部轮廓 假设在给定的图像中不存在手 那么我将采用任何轮廓并将其视为手 所以我开始思考我可以使用 haar 级联来确定

  • 反应式框架/DoubleClick

    我知道有一个简单的方法可以做到这一点 但今晚它打败了我 我想知道两个事件是否在 300 毫秒内发生 例如双击 在 300 毫秒内单击鼠标左键两次 我知道这就是响应式框架的构建目的 但该死的是 如果我能找到一个好的文档 其中包含所有扩展运算符

  • 使用 conda 安装 opencv

    这个问题与 如何通过Conda安装Python OpenCV 不同 因为这个问题是 5 年前提出的 当时所有软件包都有不同的版本 我尝试了该问题的所有答案 但都不起作用 有关详细信息 请参阅问题正文 现在 2019 年 7 月 如何使用 c

  • 用于解析日期/时间字符串（包括时区）的 C++ 库（unix）

    我有多种格式的日期 现在我想在 C 中有一个函数 来自某个库 它可以解析这些日期 时间字符串 并给我一些像 tm 这样的结构 或者将它们转换为某种确定性表示 以便我可以处理日期 时间 我看到的一些格式如下 2008 年 2 月 19 日星期

  • 是否可以用 C++ 编写敏捷的 Pimpl？

    我一直在研究 Pimpl 习语并从中获得了各种好处 我唯一不太感兴趣的是定义函数时的感觉 一旦进入标题 P def 一旦到达 cpp 的顶部 Impl def 一旦进入 cpp Impl Impl 中间 一旦到达 cpp 的下端 P Imp

  • ASP.NET MVC 模型绑定器通过 GET 和 POST 请求以不同的方式解析十进制

    服务器正在托管 Asp net mvc3 应用程序 并且浏览器区域性设置为 da 丹麦语 GET request url get d 1 1 note that the decimal separator is return da 1 1

  • 使用 osmdroid 在 OpenStreet Maps 上制作动画标记

    我正在使用给出的谷歌地图标记动画逻辑here https gist github com broady 6314689 我的标记变得动画 但每次之后marker setPosition newPosition 我需要打电话mapView i

  • Prestashop 无尽旋转产品保存按钮

    我运行的是 Prestashop 1 6 1 1 产品保存按钮大约需要 45 秒才能加载 我升级到 1 6 1 3 现在根本无法加载 我尝试回滚并升级到1 6 1 4 我删除了 Smarty Cache 删除了 Chrome 的历史记录 c

  • 过滤用户输入

    我在这里阅读了很多有关过滤用户输入的问答 但大多数时候答案是这取决于您在做什么 这就是我正在做的 通过表单提交的数据将在 MySQL 查询中使用 function clean field link return mysql real esc

  • 使用包含 2 个以上单词的单个搜索字符串对名字和姓氏列执行搜索

    我有一个查询 当前采用单个用户提供的搜索字符串 并尝试搜索包含单独的名字和姓氏列的表 如果搜索字符串中有空格 则它运行的查询基本上如下所示 SELECT FROM table WHERE table firstName LIKE first

  • 从设备删除应用程序后无法创建带有 nil 模型的 NSPersistentStoreCoordinator

    我收到了 Cannot create an NSPersistentStoreCoordinator with a nil model 从设备删除我的应用程序后出错 我正在 iPad 设备上测试 iPhone 应用程序 我已经输入此代码来检

  • 如何使嵌入图表响应

    我已将 Tradingview 中的股票图表嵌入到我的网站中 但我无法使其响应 尤其是宽度 当页面缩小时 图表开始移出屏幕 这是代码 div class tradingview widget container div div div cl

  • 如何在php中创建对象数组

    我正在尝试在 php 中创建一个对象数组 并且很好奇我将如何去做 任何帮助都会很棒 谢谢 这是将包含在数组中的类

  • Laravel 4：加载旧库：如何？

    我有一个旧图书馆 phpquery http code google com p phpquery 我想将其包含在我的项目中 我已将其放入供应商内部 但它不起作用 因为它不符合 PSR 0 标准 我不希望它为每个请求加载 所以我没有放置re

  • Spark工作人员未连接到主设备

    我想创建一个 Spark 独立集群 我可以在同一节点上运行主节点和从节点 但不同节点上的从节点既不显示主节点 URL 也不连接到主节点 我正在运行命令 start slave sh spark spark server 7077 where

  • 像函数一样组合类型构造函数

    我最近遇到了一种情况 我希望能够在实例声明中编写类型构造函数 我本来想这样做 instance SomeClass t SomeClass t gt SomeClass t t where with t t 定义为 t t a t t a

  • 如何在本地主机上测试 Facebook“点赞”按钮？

    可以测试 Like 本地主机上的按钮 并不真地 Facebook 必须抓取您的网站以获取标题 描述和缩略图 如果它位于本地主机上 则无法访问您的站点

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

    角度材料的自动完成组件在 MatDialog 组件内未按预期工作 自动完成组件中的 drpodown 部分不会粘贴到输入字段 堆栈闪电战链接 example https stackblitz com edit angular s698hp

热门标签