如预期的那样MatDialog组件内从角材料的自动完成组件不工作。 从自动完成组件的drpodown部分不沾输入字段。
stackblitz链接- 例如
重现 - 转到上述stackblitz。 点击“打开弹出”按钮。 点击“选择一个”自动完成场。 这些选项会打开下拉列表。 然后滚动弹出的bodu。 注意自动完成组件的下拉部分不沾输入字段。 我该如何解决？
Answer 1:
添加cdkScrollable到滚动股利。
- 进口
ScrollingModule在app.module.ts - 添加
cdkScrollable的滚动DIV
<div style="width: 300px; height: 100px; border: 1px solid red; overflow-y: auto;" cdkScrollable> <p>Angular Material, the ultimate design</p> <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of options" [value]="option"> {{option}} </mat-option> </mat-autocomplete> <p>Angular Material, the ultimate design</p> </div> Answer 2:
这是因为下拉实际上是部分cdk-overlay-container ，而不是部分matAutocomplete ......只能由触发matAutocomplete在被渲染cdk-overlay-container ，用计算出的top基于放置位置的matAutocomplete input在用户与场的相互作用的时间字段。
重要提示：CDK容器TRANSPARANT和全高度和宽度根浏览器视图端口，覆盖在你的应用程序的一切。
如果你把那个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
Answer 3:
你必须与你的项目文件夹执行此命令来实现材料设计支持：
角加载@ /材料
文章来源: Angular material - autocomplete component dropdown section does not stick to the input field
