Angular 6 - поместите динамическую форму в элемент управления, сортируемый по ngx

Question

Я борюсь с макетом этого в Angular 6.

У меня есть компонент формы, который добавляется динамически во время выполнения.

У меня также есть сортировка ngx, которую я хотел бывроде динамического содержимого, но не могу понять, как.

Сортируемый элемент управления

 <ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
          <ng-template let-item>
              <!-- sortable items here?? -->
          </ng-template>
   </ngx-sortable>

динамическая форма

<app-attraction-text></app-attraction-text>

Я пытался разместить тег длядинамическая форма в сортируемом контроле, но контроль появился ни с чем.Кто-нибудь делал это раньше, кто может предложить правильный путь?

Просто, чтобы дать некоторый контекст, вот HTML-код для динамического управления, я могу нажать кнопку и создать столько из них, сколько мне нужно, я хочучтобы потом иметь возможность сортировать их.

<form [formGroup]='contentForm' style="margin-top:30px">
    <div formArrayName='content'>
        <div *ngFor="let formGroup of contentLines.controls; let i = index">
            <div class="card text-left">
                <div class="card-header text-secondary">Attraction Text
                  <img  align="right" class="pull-right table-header-padding" src="assets/images/LockLineIcon.png" />
                  <img  class="float-right text-danger icon-pad draft-icon-indent" src="assets/images/DeleteIcon.png" (click)="delete(i)"/>
                </div>
                <div class="card-body" >
                  <textarea  id="text" name="text" type="text" class="form-control" required maxlength="2048" ></textarea>
                </div>
                <div class="card-footer">
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddParagraphIcon.png" (click)="add();" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddQuoteIcon.png" />
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/AddHighlightTextIcon.png" (click)="AddHighlight()"/>
                    <img align="left" class="image-hover pull-left table-header-padding" src="assets/images/addimage.png" (click)="AddImage()"/>
                    <img align="right" class="pull-right table-header-padding" src="assets/images/DragUpDownIcon.png" />
                </div>
            </div>
        </div>
    </div>
</form>

Answer 1

Похоже, вам нужно передать "элемент" в вашу динамическую форму.

Вы можете достичь этого, выполнив следующее

 <ngx-sortable [items]="items" [name]="'Attraction Content'" (listSorted)="listSorted($event)">
      <ng-template let-item>
          <app-attraction-text [item]="item"></app-attraction-text>
      </ng-template>
</ngx-sortable>

Тогда ваши компоненты динамической формы будут переданыданные, необходимые для каждого из «предметов».

На вашем динамическом компоненте вам нужно будет добавить ввод

@Input() item: any;

if (this.item) {
    this.form.patchValue(this.item);
}