2

同じコンポーネントでいくつかの cdkDropList 要素を使用して動作する例がありましたが、コードをリファクタリングしたところ、それらを別のコンポーネントに移動すると、動作が停止したことに気付きました。

ここに小さなデモがあります: https://stackblitz.com/edit/angular-cdk-drag-drop-wkpqst

「To Do」リストから「Done」リストに要素を移動しようとすると、想定どおりにリストが青い境界線で強調表示されていないことがわかります。

リストはすべて同じコンポーネント、つまり同じ範囲にある必要がありますか?

4

3 に答える 3

0

私は自分でこの問題と戦っていましたが、あなたのstackblitzとrafiのコメントが私を近づけました

私はあなたのstackblitzで遊んで、うまくいきました！

変更するだけです：

[cdkDropListConnectedTo]="[todoList]"

に

cdkDropListConnectedTo="todoList"

両側でこれらのブラケットを取り外す必要があり、両方のコンポーネントで機能し始めました!

この問題を解決するのに十分なほど私を近づけてくれてありがとう！

重要なお知らせ: 別の見栄えの良いソリューションがここにあります: 複数のドロップ ゾーンを cdkDropListConnectedTo で接続する Angular CDK

于 2021-02-19T07:04:53.943 に答える
0

@okThen の回答にコメントするには十分な評判がなく、修正したいと思います。正しい方法はかなり近いものでしたが、実際の例といくつかの説明を次に示します。

<component1 [id]="'todoList'" [cdkDropListConnectedTo]="'todoList'">
</component1>

コンポーネント''に入力を提供するため、注意してください。詳細については、私の以前の回答を参照してください。

于 2021-05-13T12:48:33.180 に答える