cdkDropListSortingDisabled 属性无法绑定,因为它是 cdkDropList 指令的未知属性。有角材料

问题描述 投票:0回答:1


所以我想实现一个用例,我想使用拖放将一些数据从一个区域(div)复制到另一个区域,我通过在网上冲浪发现Angular/Material2可以通过消耗cdkDropList来完成这项工作API。 我通过 Angular/Material2 提供的 copyArrayitem 函数进行了实现,它完成了工作,一切都很好。 问题是,下拉列表总是排序,而不是我希望我的可拖动组件在放置区域内自由,但 cdkDropList 强制在区域中排序。
所以我开始在互联网上搜索以获得一些解决方案,我发现一些博客讨论了 cdkDrop 指令组件,但我猜它没有得到支持,因为我没有找到该组件(cdkDrop)的任何开源代码angular/material2 的 GitHub 存储库,相反,我发现了一些有关 cdkDropList 指令中的 cdkDropListSortingDisabled 属性的问题,您可以参考 https://github.com/angular/material2/blob/master/src/cdk/drag-drop /directives/drop-list.ts 清楚地理解我在说什么,尤其是在这些行中

@Input('cdkDropListSortingDisabled') get sortingDisabled(): boolean { 
    return this._sortingDisabled; 
}
set sortingDisabled(value: boolean) {
    this._sortingDisabled = coerceBooleanProperty(value);
}

知道 Angular Material 官方网站(https://material.angular.io/cdk/drag-drop/api)不提供此属性。 问题知道,是否有任何可能的解决方案可以直接从 Angular GitHub 存储库使用此属性?
我尝试使用此行命令将分支添加为 package.json 中的依赖项

npm install --save Angular/material2#master 但是 npm 无法解决这个错误
npm 错误!代码 生命周期
npm 错误!错误号 1
npm 错误! [电子邮件受保护]预安装:node ./tools/npm/check-npm.js
npm 错误!退出状态1
npm 错误!
npm 错误! [电子邮件受保护]预安装脚本失败。
npm 错误!这可能不是 npm 的问题。上面可能有额外的日志输出。

或者有不同的解决方案来禁用 cdkDropList 中的排序?或执行此操作? 注意:Angular 版本 7
尽管我的英语水平有限,但我希望我能传达这个想法。
我将感谢您的帮助(博客或答案)
致以诚挚的问候。

angular angular-material2 angular-directive angular-cdk angular-dragdrop
1个回答
0
投票

您可以将其作为属性直接在 html 上传递:

<div
    cdkDropList
    [cdkDropListData]="imgFiles"
    [cdkDropListDisabled]="true"
    class="image-list"
    [cdkDropListOrientation]="listOrientation"
    (cdkDropListDropped)="drop($event)">
    <div class="image-box" [ngClass]="{'mobile-full-img': !originalData.only}" cdkDrag *ngFor="let item of imgFiles">
      <mat-checkbox *ngIf="!originalData.only" color="primary" (dblclick)="checkItmIE(item)" [(ngModel)]="item.checked"></mat-checkbox>
      <img [src]="item.src">
      <div class="spinner-wrapper" *ngIf="!item.done">
        <div class="spin"></div>
      </div>
      <span class="success-check-span" *ngIf="item.done && !item.stopStatusFeedback">
        <i class="fas fa-check-circle"></i>
      </span>
    </div>
  </div>
© www.soinside.com 2019 - 2024. All rights reserved.