Angular cdk拖放:拖放到其他容器后保持元素样式

Question

我有一个带有行的时间线，并且我想在时间线的行之间移动项目。为此，我使用angular-cdk拖放，每一行都是一个cdkDropList。当在不同的列表之间移动行时，我希望保持所放项目的原始样式，但在将项目放到另一个列表中后，该项目采用另一个列表中项目的样式。如果我在同一列表中移动项目，我可以更改项目的样式。

我设置了一个堆栈闪电战：https://stackblitz.com/edit/angular-opuyuk

您可以看到，如果在列表之间移动项，样式将更改为列表项，但当在其自己的列表中移动项时，样式可以更改。

Answer 1

您需要将样式/cssClass保留在TypeScript: example: 1：https://stackblitz.com/edit/angular-9vnaqy?中

就您的情况而言，您需要创建一个公共接口或类

  class theItems{
    name:String;
    styleClass:String;
  }

或者你想用一个动态类来处理它，这取决于你想如何解决HTML端的问题。

dones:theItems[]=[
    {
    name:    'Get to work',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
    {
    name:    'Brush teeth',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
    {
    name:    'Take a shower',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
];

todos:theItems[]=[
  {
    name:     'Get to work',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:    'Pick up groceries',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:     'Go home',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:       'Fall asleep',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
];

预先填充数组中的对象列表，并将cdkDropListData连接到所需的数组。

现在可以肯定的是，如果你想在typescript中使用css，你必须为DOM清理它

 safeCss(style) {
    return this.doms.bypassSecurityTrustStyle(style);
}

或者，您也可以只使用css/SCSS类名。

最后，在Html元素中使用经过清理的css：

[style]="safeCss(item.styleClass)"

请随时评论您的想法，如果被接受为答案，将不胜感激。

https://stackblitz.com/edit/angular-9vnaqy