拖放（角度材质CDK）不起作用。先前和当前索引有误

Question

我有一个主题列表，每个主题都有一个颜色列表。我用一个按钮打开一个Angular对话框显示所有主题，在对话框中列出该主题的所有颜色，并且可以将这些颜色重新排序@ angular / cdk / drag-drop。

如果我只列出了2-4个主题。我能够毫无问题地重新排列每个主题的所有颜色。但是，如果我有20-30个主题的列表。只有第一个主题可以正常工作，我可以打开对话框并重新排列项目，但是，如果我选择了最后一个项目，则拖放无效。

我尝试调试错误，发现重新排序不起作用时，先前的索引和当前的索引具有相同的值。对于正确的索引，正确的索引是正确的。

我在StackBlitz上构建了一个简单的应用程序，可以在其中重现我遇到的问题。您可以尝试单击列表的第一项的“编辑”按钮，然后看到它可以正常工作，并且可以重新排列颜色，但是尝试重新排列列表中的最后一个主题，您将发现它不起作用。我在控制台中看不到任何错误。我在Chrome和Firefox上都尝试过，但都遇到了相同的问题。

每次拖放颜色时，您还可以在控制台中看到当前索引和上一个索引。

这是该应用程序的链接。

Answer 1

尝试将此类添加到您的全局 CSS 中。我确信它会在对话框下方的布局中产生一些临时问题，但拖放应该可以正常工作

html.cdk-global-scrollblock {
  position: initial !important;
}

html.cdk-global-scrollblock body {
  position: fixed;
}