невозможно перетащить динамически созданный div (ckdDrag) в angular7 - PullRequest
Новая
       19

невозможно перетащить динамически созданный div (ckdDrag) в angular7

0 голосов
/ 19 июня 2019

После перетаскивания элемента, основанного на смещении x и y, я добавляю html-код (div с cdkDrag). Я хочу, чтобы этот недавно добавленный div перетаскивал тот же контейнер. Но cdkDrag не работает для динамически создаваемых элементов 

app.component.html 


        <div #html_container> <div cdkDrag > Product 1 </div></div>
        <button (click) = "create_element()" > Add New </button>


app.component.ts 

            construct(public render2: Renderer2) {}
            product_name:string='';
            @ViewChild('html_container') public html_container: ElementRef;

        create_element() {
            this.getProductName();
            const add_html = '<div cdkDrag >'+this.product_name+'</div>';
            const p = this.render2.createElement('html_container');
            p.innerHTML = add_html;
            this.render2.appendChild(this.html_container.nativeElement, p);
        }

        getProductName(){
            this.product_name = 'Product 2'; //this will be dynamic value comming from backend services
       }

Названия продуктов (this.product_name) не в последовательности. Они генерируются случайным образом на основе бизнес-логики со стороны сервера.

"Динамически сгенерированное имя this.product_name (Product N)" должен быть перетаскиваемым

1 Ответ

0 голосов
/ 19 июня 2019

вы не можете динамически добавить cdkDrag к элементу, но вы можете достичь с помощью * ngFor Example 

///get data from array 
const items=['one','two'];

///use with ngFor so that if you push some data in to that array that will 
automatically get drag and drop option
<div *ngFor='let item of items'>
 <div cdkDrag>{{i}}</div>
</div>
...