Question

如何在 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);
    }
  }
}

Answer 1

将 id 添加到每个下拉列表。

<div cdkDropListGroup>
  <div class="example-container">
    <h2>To do</h2>

    <div
      cdkDropList
      id="todo"
      [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
      id="done"
      [cdkDropListData]="done"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>

然后在 drop 函数中检查长度。

  drop(event: CdkDragDrop<string[]>) {
    if (event.container.id === 'todo' && event.container.data.length >= 5) {
      return;
    }

    if (event.container.id === 'done' && event.container.data.length >= 9) {
      return;
    }
  
    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);
    }
  }

Answer 2

您应该使用 cdkDropListEnterPredicate，每当项目即将进入新容器时都会调用它。

您的组件

在这里，您可以创建 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"

角度拖放中数组的最大长度

2 个答案: