Angular：如何在dragula ng2上动态更改放置的元素？

Question

我正在设置一个Ionic（4）应用程序，您可以在其中将元素从工具栏拖放到窗口中。我想根据其类型更改放置的元素。我正在使用ng2-dragula。

例如，我想删除一个元素<ion-chip></ion-chip>，而当它删除时，它应该类似于<ion-card dragula="DRAGGABLE"></ion-card>。

-我尝试在事件（https://github.com/valor-software/ng2-dragula/blob/master/modules/demo/src/app/examples/02-events.component.ts）中更改DOM externalHTML，但是新创建的元素内的dragula处于不活动状态。

-我尝试了* ngIf，但似乎也无法动态加载。

我还有什么其他可能性？

<div dragula="DRAGULA_EVENTS">
  <div>content</div>
</div>

BAG = "DRAGULA_EVENTS";
subs = new Subscription();

export class EventsComponent{
 public constructor(private dragulaService: DragulaService){
   this.subs.add(this.dragulaService.drop(this.BAG)
      .subscribe(({el,source,target})=>{ 
         el.outerHTML = "<ion-card dragula='DRAGULA_EVENTS'>content</ion-card>"
      }
   } 
 })
}

我希望新的DOM元素具有dragula属性，就像我在externalHTML-tag上设置它一样。