angular - 角度拖放中数组的最大长度
问题描述
如何以角度设置数组的最大大小。我使用 Angular Material 中的拖放功能,我想将“todo”中的 5 个值和“done”中的 9 个值设置为限制。当您尝试将项目拖放到限制列时,该项目必须返回到其原始列。
<div cdkDropListGroup>
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
[cdkDropListData]="todo"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
[cdkDropListData]="done"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
</div>
TS:
import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
/**
* @title Drag&Drop connected sorting group
*/
@Component({
selector: 'cdk-drag-drop-connected-sorting-group-example',
templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-group-example.css'],
})
export class CdkDragDropConnectedSortingGroupExample {
todo = [
'Get to work',
'Pick up groceries',
'Go home',
'Fall asleep'
];
done = [
'Get up',
'Brush teeth',
'Take a shower',
'Check e-mail',
'Walk dog'
];
drop(event: CdkDragDrop<string[]>) {
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);
}
}
}
解决方案
您应该使用cdkDropListEnterPredicate
which 将在项目即将进入新容器时调用。
你的组件
在这里,您可以创建 2 个 getter,为您提供有关容器是否可以接收元素的信息:
get isTodoAvailable(): boolean {
return this.todo && this.todo.length < 5;
}
和
get isDoneAvailable(): boolean {
return this.done && this.done.length < 9;
}
然后你必须设置你的谓词
todoPredicate = (): boolean => {
return this.isTodoAvailable;
}
和
donePredicate = (): boolean => {
return this.isDoneAvailable;
}
你的模板
cdkDropListEnterPredicate
在您的模板中,您应该通过属性链接谓词。因此,在todo元素中,您必须添加以下属性:
[cdkDropListEnterPredicate]="todoPredicate"
在done元素中,您必须添加以下属性:
[cdkDropListEnterPredicate]="donePredicate"
推荐阅读
- python - 用于自动搜索网站的 Python 脚本?
- angularjs - ionic 4 通过单击按钮填充列表
- extjs - Extjs:覆盖 pivot.plugin.configurator 设置的字段
- java - java函数检查总和是偶数还是奇数,为什么我的代码不起作用?
- jquery - 查找包含项目数组的所有链接
- android - 如何使用 for 循环在 TextView 中显示整数
- angularjs - javascript:更改日期格式但不更改为字符串
- aws-lambda - js文件路径问题,NuxtJS+AWS Lambda
- c++ - 在 unistd 读取调用中加强潜在的缓冲区溢出
- list - Prolog - 返回嵌套列表中唯一数字的列表