angular - 在芯片列表之间切换时,角度材料拖放占位符未正确显示
问题描述
我正在使用 Angular Material 10,并试图让用户能够在两个芯片列表之间拖放芯片。其中一个筹码列表开始为空。为了使人们能够将任何东西放到该列表中,我设置了子包装器的最小高度,以便在某个地方放置芯片(这也不理想,因此将不胜感激)。
我的主要问题是,当用户将芯片拖到新列表上时,占位符芯片不会放置在 Angular 创建的芯片列表包装器中,而是作为包装器的兄弟元素。因此,占位符只是悬挂在包装器的空白空间下方。一旦用户放下元素,实际元素就会正确地放置在包装器中。
Stackblitz 在这里展示了这个问题
有什么方法可以修复它,以便将占位符元素实际放置在芯片列表包装器中,以便正确呈现它?
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;
}
解决方案
推荐阅读
- enums - 两种类型的派送应该怎么做?
- python-3.x - 张量流中的占位符无效
- python-3.x - Python socket recv 没有给出好的结果
- r - 如何按存储在变量中的列中的日期过滤数据框?
- python - 在 ipython 中获取进程退出代码(和其他“特殊”环境变量)
- javascript - Companies House,从响应中提取数据(rest API)
- r - 如何从嵌套列表创建数据框?
- flutter - 我如何在颤动中获得这种计时器类型的视频播放器?
- html - 我的 HTML 元素根据屏幕大小改变位置
- java - 如何区分 Solr 中建议查询中的上下文字段?