我有一个主题列表,每个主题都有一个颜色列表。我用打开“Angular 对话框”的按钮显示所有主题,在对话框中列出了该主题的所有颜色,这些颜色可以重新排序@angular/cdk/drag-drop。
如果我有一个仅包含2-4个主题的列表。我能够毫无问题地重新排列每个主题的所有颜色。但是,如果我有20-30个主题的列表。只有第一个主题可以正常工作,我可以打开对话框并对项目进行重新排序,但是如果选择了最后一个项目,则拖放操作将无效。
我尝试调试该错误,并发现在重新排序不起作用时,先前的索引和当前的索引具有相同的值。对于那些工作,正确的索引是正确的。
我在StackBlitz上构建了一个简单的应用程序,可以在其中重现我遇到的问题。您可以尝试单击列表第一项的“编辑”按钮,然后看到它可以正常工作,并且可以重新排列颜色,但是尝试重新排列列表中的最后一个主题,您将发现它不起作用。我在控制台中看不到任何错误。我在Chrome和Firefox上都尝试过,但都遇到了相同的问题。
每次拖放颜色时,您还可以在控制台中看到当前索引和上一个索引。
Here is the link to the app.
最佳答案
尝试将此类添加到全局CSS。
我确定它将在对话框下面的布局中产生一些临时问题,但是拖放应该可以正常工作
html.cdk-global-scrollblock {
position: initial !important;
}
html.cdk-global-scrollblock body {
position: fixed;
}
关于angular - 在Mat-Dialog(Angular Material CDK)上拖放无效。先前和当前索引有误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55824444/