Question

我正在使用Angular Material 10，并试图使用户能够在两个芯片列表之间拖放芯片。芯片列表之一开始为空。为了使人们能够将任何东西放到该列表中，我设置了儿童包装纸的最小高度，以便在某个地方放下芯片（这也不理想，因此可以选择替代产品）。

我的主要问题是，当用户将芯片拖动到新列表上时，占位符芯片不会放在Angular创建的芯片列表包装中，而是作为包装的同级元素。因此，占位符只是悬在包装纸的空白空间之下。一旦用户放下元素，实际的元素就会正确放置在包装中。

Stackblitz显示问题here

有什么方法可以解决，以便将占位符元素实际放置在芯片列表包装器中，以便正确呈现？

app.component.html

<div id='mainView'>

  <h3>Primary One</h3>
  <mat-chip-list 
    cdkDropList
    id='primary-list'
    [cdkDropListData]='primaryOptions'
    [cdkDropListConnectedTo]="['secondary-list']"
    (cdkDropListDropped)='drop($event)'
    class='mat-chip-list-stacked drag-area'
    aria-orientation="vertical">
    <mat-chip 
      *ngFor='let i of primaryOptions'
      cdkDrag
      [removable]="true" 
      style='width: auto;'>
      {{i}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>

  <h3>Secondary List</h3>
  <mat-chip-list 
    cdkDropList
    id='secondary-list'
    [cdkDropListData]='secondaryOptions'
    [cdkDropListConnectedTo]="['primary-list']"
    (cdkDropListDropped)='drop($event)'
    class='mat-chip-list-stacked drag-area'
    aria-orientation="vertical">
    <mat-chip 
      *ngFor='let i of secondaryOptions'
      cdkDrag
      [removable]="true" 
      style='width: auto;'>
      {{i}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>

</div>

app.component.ts

import { Component, VERSION } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  primaryOptions = [
    'Apple',
    'Carrot',
    'Banana',
  ];
  secondaryOptions = [];
  drop(event: CdkDragDrop<any>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }    
  }
}

app.component.css

#mainView {
  padding: 10px;
}

:host /deep/ .drag-area .mat-chip-list-wrapper {
  border: solid 1px #ccc;
  border-radius: 4px;
  min-height: 36px;
}

.drag-area {
  border: solid 1px red;
}

在芯片列表之间切换时，Angular Material拖放占位符无法正确显示

0 个答案: