Angular 拖放时不显示 FormArray 名称

Question

正在尝试使用由 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

Answer 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>

Angular 拖放时不显示 FormArray 名称

Angular FormArray Name Not Displaying For Drag & Drop

angular-material

angular

angular-cdk

angular-cdk-drag-drop