Question

我正在为Angular 6中的布局苦苦挣扎。

我有一个表单组件，可以在运行时动态添加。

我也有ngx-sortable，我希望将其包含在动态内容中，但无法弄清楚该怎么做。

可控控件

 <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);
}

Angular 6-将动态表单放置在ngx可排序控件中

1 个答案: