标签: angular-cdk

因此，我正在沙箱中工作，以模仿我希望实现此拖放操作的应用程序的环境。很抱歉这么啰嗦，但我真的想确保正确解释问题，因为我已经看到了几篇关于此的旧帖子未回答或回答错误问题的问题。

简洁版本

1. cdk dnd 不会自动滚动
2. 做了我自己的自动滚动
3. cdk dnd 滚动后不会掉落

诀窍是，cdk 拖放自动滚动功能似乎只能在与整个窗口大小相关的情况下开箱即用，或者如果它是带有溢出-y 的固定高度 div：滚动（这就是我正在尝试的）做），那么这需要在 cdkDropList 级别。不幸的是，由于我的应用程序的组件架构，目前这不是一个选项。

我编写了自己的自动滚动功能，该功能在拖动元素时根据鼠标的屏幕位置滚动 div，我可以正常工作，但最大的问题是，一旦 div 开始滚动，您就无法将项目拖放到元素中。列表。

这是我的父组件的 HTML（具有固定高度和溢出位置的 div）

<div #ScrollDiv style="height: 200px; width: 200px; overflow-y: scroll; padding: 5px;">
  <app-child (itemSelected)="itemSelection($event)"></app-child>
</div>

这是带有 cdk 指令的子组件模板

   <div cdkDropList style="border: 2px solid purple;" (cdkDropListDropped)="drop($event)">
    <div cdkDrag [cdkDragData]="draggers" *ngFor="let item of draggers; let i = index"
            style="height: 30px; border: 2px solid blue; margin: 5px"
            (mousedown)="grabDrag()">
            {{item}}</div>   
    </div>

此时，我可以在窗口中拖动，但自动滚动不起作用，因此我将自动滚动添加到父组件的 Type Script 文件中，更改 (mousemove) 上的滚动位置。对于开始向上/向下滚动的位置，这些值是基于我正在使用的页面上的硬编码。 …

我创建了一个图片库，我打算改变它们之间的位置。为此，我使用拖放 cdk 库。

我的问题是图像交换并不总是正确发生，有时我将第一张图像与第二张图像交换，但这种交换不会发生。

我怎样才能拥有这个功能齐全的水平和垂直功能？

有没有一种方法只能在图像存储在 mdc-image-list - with-text-protection 类中时才开始拖动？

谢谢 ！

演示版

.HTML

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;" cdkDropList [cdkDropListData]="data"
           (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let product of data; let  j = index;">
      <li class="mdc-image-list__item" cdkDrag>
        <div class="mdc-image-list__image-aspect-container">
          <ng-container *ngIf="product.image == null; else productImage">
            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
          <ng-template #productImage>
            <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
        </div>
        <div class="mdc-image-list--with-text-protection">
        <div class="mdc-image-list__supporting mdc-image-list__supporting">
        <span class="mdc-image-list__label">{{product.name}}</span>
        </div>
        </div>
      </li>
    </ng-container>
  </ul>

.ts

    drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex …

我有一个 mat-menu，其中内容可能因用户而异。我尝试编写单元测试，但从我所看到的情况来看，茉莉花看不到 CDK div，所以我无法获取菜单条目。

我的模板：

<button id="account" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Profile">\n    <mat-icon>person</mat-icon>\n</button>\n<mat-menu #menu="matMenu">\n    <button mat-menu-item *ngxPermissionsOnly="PERMISSION.USER_LIST" id="user-list" (click)="usersList()">\n        <mat-icon>recent_actors</mat-icon>\n    </button>\n    <button mat-menu-item *ngxPermissionsOnly="PERMISSION.INFORMATIONS" id="informations" (click)="infoList()">\n        <mat-icon>info</mat-icon>\n    </button>\n    <button mat-menu-item id="logout" (click)="logout()">\n        <mat-icon>exit_to_app</mat-icon>\n    </button>\n</mat-menu>\n

单元测试：

let component: HeaderComponent;\nlet fixture: ComponentFixture < HeaderComponent > ;\n\nconst providers: any[] = headerProviders;\n\nbeforeEach(async (() => {\n    TestBed.configureTestingModule({\n            declarations: [\n                HeaderComponent,\n                NgxPermissionsRestrictStubDirective\n            ],\n            providers: providers,\n            imports: [\n                BrowserAnimationsModule,\n                BrowserModule,\n                CommonModule,\n                CommonSogetrelModule,\n                FlexLayoutModule,\n                SharedMaterialModule,\n                RouterTestingModule.withRoutes([])\n            ]\n        })\n        .compileComponents()\n        .then(() => {\n            fixture = TestBed.createComponent(HeaderComponent);\n …

我想<cdk-virtual-scroll-viewport>使用 CSS 类自定义 a .cdk-virtual-scroll-content-wrapper，以便滚动容器始终显示滚动条。但我针对此特定元素的 CSS 代码未应用（同一组件中的所有其他样式都有效）。

.cdk-virtual-scroll-content-wrapper {
  overflow-y: scroll;
}

该行为并非特定于此 CSS 属性 - 例如，如果我设置边框，也不会产生任何效果。

在开发者工具中我可以看到有效的 CSS，但缺少overflow-y：

.cdk-virtual-scroll-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    contain: content;
}

但是，如果我直接在浏览器的开发人员工具中更改相应 HTML 元素的 CSS，则会显示滚动条。

将 CSS 设置为cdk-virtual-scroll-viewport或cdk-virtual-scroll-viewport > div也不起作用：

cdk-virtual-scroll-viewport {
  overflow-y: scroll;
}

我将 Angular 10.2.2 与 Sass 一起使用。

如何应用CSS .cdk-virtual-scroll-content-wrapper？

我有一个包含以下代码的对话框，其中显示了几个mat-card. 该代码完美地配合ngfor并显示了我的期望。但因为卡片数量较多，所以我决定使用cdkScrolling，但是当我添加代码时，它没有显示任何内容，尽管它在代码中渲染了。并且页面几乎显示为空白。\n有人知道问题出在哪里吗？我是否错误地实施了它？

对话框.html：

    <div style="direction: rtl;position: relative" fxLayout="row wrap" fxLayoutAlign="space-around right">\n  <ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" size="medium" color="#fff" type="ball-clip-rotate"\n               [fullScreen]="false"></ngx-spinner>\n  <div fxFlex="100">\n    <mat-card style="text-align: center; font-size: 13px">\n      <mat-card-header style="flex-direction: row; box-sizing: border-box; display: flex;">\n        <img mat-card-avatar #avatarPic [src]="data.selectedPage.profilePicUrl"\n             (error)="avatarPic.src = 'assets/images/default_image-4_3-640x360.png'"\n              >\n        <mat-card-title>\n          {{data.selectedPage.userName}}\n        </mat-card-title>\n        <mat-card-subtitle>\n          {{data.selectedPage.bio}}\n        </mat-card-subtitle>\n        <span style="width: 100%"></span>\n        <button mat-button (click)="close()">\n          <mat-icon>keyboard_backspace</mat-icon>\n        </button>\n      </mat-card-header>\n      <mat-divider style="border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>\n      <div fxLayout="row wrap" fxLayoutAlign="center center" style="font-size: 16px;margin: 10px">\n …

目前我正在使用角料设计垫桌.请帮我从mat-table中删除数据记录.

这是代码:

            <mat-table #table [dataSource]="dataSource" matSort slimScroll width="auto" height="450px" color="rgba(0,0,0,0.3)" size="3px">
                    <!-- modelName Column -->
                    <ng-container matColumnDef="modelname">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                    <mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"> <span>{{element.modelname}}</span> </mat-cell>
                    </ng-container>

                    <!-- modelNumber Column -->
                    <ng-container matColumnDef="modelnumber">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Number </mat-header-cell>
                    <mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"> <span>{{element.modelnumber}}</span> </mat-cell>
                    </ng-container>

                    <!-- manufacturer Column -->
                    <ng-container matColumnDef="manufacturer">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Manufac </mat-header-cell>
                    <mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"> <span>{{element.manufacturer}}</span> </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" id="{{row.uuid}}" …

有没有办法使附着的组件覆盖有效位置？例如，我说要在上方打开一个工具提示，但这无法完成，覆盖层将在下面打开。我想从工具提示中添加一个指向我的元素的箭头，现在如果覆盖层位于元素上方/下方，则需要正确定位箭头

如何在mat-table中通过按钮触发模式，而不触发行（click）事件？我已经在Ang Cell中看到并阅读了Angular Material 2 Table Mat Row Click事件，也单击Mat Cell中的按钮单击，但是在那里使用$ event.stopPropagation（）的解决方案阻止显示模态。

我遵循了这个https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html的行扩展功能。

这是我的代码的一小段：

<mat-table [dataSource]="dataSource"  matSort>
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef  mat-sort-header>Name</mat-header-cell>
          <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="username">
          <mat-header-cell *matHeaderCellDef  mat-sort-header>Username</mat-header-cell>
          <mat-cell *matCellDef="let element">{{element.username}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="email" class="hideOnResponse">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
          <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="action">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let element">
              <a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
                <i class="fas fa-pencil-alt"></i>
              </a>
              <a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
                <i class="fas fa-trash-alt"></i>
              </a>
          </mat-cell>
        </ng-container> …

是否有与网格列表配合使用的虚拟滚动实现？我认为默认实现不会起作用，因为每一行周围都应有一个元素。

我正在使用网格列表显示个人资料图片，并且需要无限滚动或最好是虚拟滚动才能加载新的图片。

当我们将按钮放置在角度材质对话框中时，它会自动将第一个按钮聚焦在该模式中。

Stackblitz示例