Angular FormArray 名称不显示拖放答案

【问题标题】：Angular FormArray Name Not Displaying For Drag & DropAngular FormArray 名称不显示拖放
【发布时间】：2020-06-09 13:57:34
【问题描述】：

尝试使用由 FormGroup > FormArray 填充的 cdkDragDrop。我可以看到我的数组 (3) 中的项目数已正确呈现，但我无法在 div 中显示该值，而是显示 [Object Object]。

组件：

export class CdkDragDropSortingExample {

myForm: FormGroup;  

constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      title: ['title'],
      items: fb.array([
        fb.group({
          name: fb.control('1'),
          note: fb.control('quux')
        }),
        fb.group({
          name: fb.control('2'),
          note: fb.control('bar')
        }),
        fb.group({
          name: fb.control('3'),
          note: fb.control('baz')
        })         

      ])
    })
  }
  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
    moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
  }

HTML：

<form [formGroup]="myForm">
    <input formControlName="title" />
    <div cdkDropList
    class="example-list"
    (cdkDropListDropped)="drop($event)">

        <div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag
            #elem="cdkDrag" (mouseenter)="enter(i)">
            <span cdkDragHandle>drag {{item}}</span>            
        </div>
    </div>


    {{ myForm.value | json}}
</form>

Stackblitz:https://stackblitz.com/edit/angular-asevei-gf4der?file=app%2Fcdk-drag-drop-sorting-example.html

【问题讨论】：

标签： angular angular-material angular-cdk angular-cdk-drag-drop

【解决方案1】：

不太清楚你想在 div 中显示什么，但你现在只是在这一行中插入一个表单组：

<span cdkDragHandle>drag {{item}}</span>

你想要类似的东西

<span cdkDragHandle>drag {{item.value | json}}</span>

或

<span cdkDragHandle>drag {{item.value.name}}</span>

或许

<span cdkDragHandle>drag {{item.get('name').value}}</span>

【讨论】：