问题标签 [angular-cdk]

有没有人能够在 mat-select 中使用 virtual-scroll ，如下所示？

如您所见， https://stackblitz.com/edit/angular-h4xptu?file= app%2Fselect-reset-example.html 它不起作用-滚动时会导致奇怪的空白。

有人可以解释或向我展示一些关于他将如何执行以下操作的代码：

我有一场比赛——所有被分配到球队的球员，然后我有一个首发十一人（地图上的 11 个占位符）和球队替补席上的 7 个位置。

我现在如何将球员拖放到足球场和替补席上的指定占位符？如果我把它放到一个占位符上，占位符不应该是可见的——但是拖动的内容——我需要这个拖动的内容（被拖动的播放器）的 id 来更新 match.startingEleven、match.substitutes 并将播放器从比赛中删除。分配球员名单。

当按照下面的代码使用角度 cdk-virtual-scroll 时，内容在图像加载之前正确显示。但是，加载图像后，滚动似乎无法正常工作。

在这种情况下，滚动方向是垂直的。当滚动发生时，额外的空白被添加到父视口的底部。

我推测滚动元素在图像加载之前确定了子大小，因此每个子的高度与图像加载后的实际子高度不匹配。

问题是我有什么选择来解决这个问题，拜托。

我正在为其中一项要求实现 mat-select 和 mat-option，但似乎它与某些现有功能冲突。

首先，如果我可以在 angular 4 中获得 @angular/material，谁能帮助我，我安装的版本是 6.4.7。是否有任何版本支持 Angular 4.0.0，因为目前我们没有计划将我们的应用程序升级到 Angular 6。

一旦我使用以下命令安装了角度/材料：

它声明抛出以下错误：

看起来这是版本问题，但任何人都可以指导我解决这个问题的方法是什么？

在这个问题中添加我的代码：

shared.module.ts 文件

app.module.ts 文件

实际上它甚至没有命中代码，只要我安装了 angular/material 和 angular/cdk，我的 ng 构建就会因上述错误而失败。

我真的想了解叠加位置参数，但没有任何运气。我也找不到有关此主题的任何文档。

下面的代码是什么意思？

是否可以使方向在 cdk 拖放的两个方向上进行排序？我正在尝试制作一个看起来像 grafana 的仪表板。这会对两个方向的可拖动项目进行排序。有没有人推荐任何角度调整处理程序库？

示例 -链接

我正在尝试实现一个基本的（非常基本的）模式实现。我有一个ModalService和一个ModalComponent。

ModalService创建一个实例并使用@angular/cdk/portal 将其ModalComponent注入到页面中。

我可以让模态显示得很好:-)

ModalComponent有一个我希望订阅的 Observable 属性，以便ModalService在模式中单击“关闭”按钮时，可以发出一个值并且ModalService可以关闭模​​式。

但是，当组件发出值时，服务不会对其进行操作。从服务端看，我好像订阅了，但从组件端看，它显示了 0 个观察者。

我想也许我可以使用一个典型的@Output()EventEmitter，但我不确定在模态类中将其连接起来，因为子元素最初不存在。

我在想也许我的组件引用不太正确（也许我有 2 个不同的？）。我正在尝试从这个答案中提出建议

任何想法我做错了什么？

服务

零件

另外，如果我碰巧问错了问题，这意味着有更好的整体方法，我愿意接受建议。:-)

谢谢！

Angular Material CDK 树组件文档说：

“扁平树通常更容易设计和检查。它们对滚动变化也更友好，例如无限或虚拟滚动”

任何想法如何将虚拟滚动应用于 CDK 平面树？

我有一棵巨大的树要渲染，现在它太慢了，当我递归打开所有节点时，它会崩溃

我试过 < cdk-virtual-scroll-viewport > @angular/cdk-experimental 但没有弄清楚如何将它与树组件集成

使用 @angular/cdk 的新拖放功能（我目前使用的是 7.0.0-beta.2 版本），是否可以取消拖放操作？

我没有在“CdkDrag”上找到可以解决问题的匹配函数。

编辑自 2019-01-10

感谢您到目前为止的回复。不过，我想我还不够清楚：我正在寻找一种方法来取消已经在进行的拖动动作。IE。在拖动项目时，我希望有可能使该项目返回到它来自的容器（例如，通过按 Escape 键）。

有任何想法吗？

我实际上是在尝试在 CDK Table /material design 的表格组件中插入一个单选按钮组。 查看预期图像/结果

https://stackblitz.com/angular/qxkmjjxrlrm?file=app%2Ftable-sticky-header-example.ts