angular - 角材料MatTable拖放(Angular Material MatTable Drag And Drop)

Question

I'm using drag and drop functionality over a MatTable, but I'm facing the following error only the first time a move a row:

(我在MatTable上使用了拖放功能，但仅在第一次移动行时才遇到以下错误：)

zone.js:192 Uncaught TypeError: Cannot read property 'clientRect' of undefined at CdkDropList.push../node_modules/@angular/cdk/esm5/drag-drop.es5.js.CdkDropList._sortItem (drag-drop.es5.js:1834) at CdkDrag.push../node_modules/@angular/cdk/esm5/drag-drop.es5.js.CdkDrag._updateActiveDropContainer (drag-drop.es5.js:1046) at SafeSubscriber.CdkDrag._pointerMove [as _next] (drag-drop.es5.js:679) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at Subject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) at HTMLDocument.handler (drag-drop.es5.js:226) at ZoneDelegate.push../node_mo

(zone.js：192未捕获的TypeError：无法读取CdkDropList.push ../ node_modules/@angular/cdk/esm5/drag-drop.es5.js.CdkDropList._sortItem（drag-drop.es5。 js：1834）在CdkDrag.push ../ node_modules/@angular/cdk/esm5/drag-drop.es5.js.CdkDrag._updateActiveDropContainer（drag-drop.es5.js：1046）在SafeSubscriber.CdkDrag._pointerMove [as _next]（drag-drop.es5.js：679）移至SafeSubscriber.push ../ node_modules处的SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub（Subscriber.js：196） /rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next（Subscriber.js：134）在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next（Subscriber.js：77）在Subjectr.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next（Subscriber.js：54）处，在Subject.push ../ node_modules / rxjs / _esm5 / internal / Subject.js.Subject。在ZoneDelegate.push ../ node_mo处的HTMLDocument.handler（drag-drop.es5.js：226）下一个（Subject.js：47）)

dules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

(dules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：421）)

If I move a row again the problem will not be reproduced.

(如果我再次移动一行，该问题将不会重现。)

I have found this topic on github but It is not the same, and the problem seems not be fixed on angular 7.

(我在github上找到了这个主题，但是不一样，问题似乎并没有解决在angular 7上。)

https://github.com/angular/components/issues/13077

(https://github.com/angular/components/issues/13077)

Moreover I have found this example where drag and drop works fine, but I can't reproduce it on my code and Angular versión is 7: https://stackblitz.com/edit/table-drag-n-drop?file=app%2Ftable-basic-example.ts

(此外，我发现该示例的拖放效果很好，但是我无法在我的代码中重现它，而Angularversión为7： https ://stackblitz.com/edit/table-drag-n-drop?file = app ％2Ftable-basic-example.ts)

This is my html:

(这是我的html：)

<mat-table class="table" [dataSource]="dsConditcl" matSort id="tableConditcl" cdkDropList [cdkDropListData]="dsConditcl.data" (cdkDropListDropped)="dropTable($event)">
        <mat-header-row *matHeaderRowDef="displayedColumnsConditcl"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumnsConditcl;" cdkDrag></mat-row>
        <ng-container matColumnDef="moverow">
          <mat-header-cell scope="col" class="column-left column-moverow" *matHeaderCellDef></mat-header-cell>
          <mat-cell class="data-type" *matCellDef="let conditclimit">
             <button class="button-moverow pointer"><img class="moverow" /></button>
          </mat-cell>
        </ng-container>
        <ng-container matColumnDef="ordenation">
           <mat-header-cell scope="col" class="column-left column-ordenation" mat-header-cell *matHeaderCellDef> {{ 'column.ordenation' | translate }}</mat-header-cell>
           <mat-cell class="data-type" *matCellDef="let conditclimit"> {{conditclimit.ordenation}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="stationname">
           <mat-header-cell scope="col" class="column-left column-station" mat-header-cell *matHeaderCellDef> {{ 'column.stationname' | translate }}</mat-header-cell>
           <mat-cell class="data-type" mat-cell *matCellDef="let conditclimit"> {{conditclimit.stationcode}} - {{conditclimit.stationname}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="nextstationname">
        <mat-header-cell scope="col" class="column-left column-station" mat-header-cell *matHeaderCellDef> {{ 'column.nextstationname' | translate }}</mat-header-cell>
        <mat-cell class="data-type" mat-cell *matCellDef="let conditclimit"> {{conditclimit.nextstationcode}} - {{conditclimit.nextstationname}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="actions">
           <mat-header-cell class="column-actions cdk-column-actions" width=50 mat-header-cell *matHeaderCellDef>{{ 'column.actions' | translate }}</mat-header-cell>
           <mat-cell class="data-type" mat-cell *matCellDef="let conditclimit">
           <div class="float-left tooltip">
           <span class="tooltiptexteditar">{{ 'tooltip.edit' | translate}}</span>
           <button class="button-row pointer" (click)="addUpdateConditcl(conditclimit)"><img class="edit-row" /></button>
           </div>
           <div class="float-left tooltip">
           <span class="tooltiptextborrar">{{ 'tooltip.delete' | translate}}</span>
           <button class="button-row pointer" #deleteTcLimit value="{{'dialog.delete' | translate }}" (click)="showDialog(titleDeleteCondTclimit,dialogDeleteCondTclimit,acceptbutton,cancelbutton,4,conditclimit)"><img class="delete-row"/></button>
           </div>
           </mat-cell>
        </ng-container>
     </mat-table>

This is my package.json:

(这是我的package.json：)

{
"name": "SWC",
"version": "0.0.4",
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner"
},
"private": true,
"dependencies": {
    "@angular/animations": "^7.0.4",
    "@angular/cdk": "^7.1.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.1.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular-datatables": "^7.0.0",
    "angular-mocks": "^1.7.5",
    "angularjasper2": "0.0.3",
    "bootstrap": "^4.1.3",
    "canvas2image": "^1.0.5",
    "core-js": "^2.5.4",
    "datatables.net": "^1.10.19",
    "datatables.net-dt": "^1.10.19",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-alpha.12",
    "html2pdf.js": "^0.9.1",
    "jquery": "^3.3.1",
    "jspdf": "^1.5.3",
    "jspdf-autotable": "^3.2.10",
    "ng-mocks": "^7.1.3",
    "ngx-mat-select-search": "^2.0.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "tslib": "^1.10.0",
    "tslint-sonarts": "^1.8.0",
    "typescript-compiler": "^1.4.1-2",
    "zone.js": "~0.8.26"
},
"devDependencies": {
    "@angular-devkit/build-angular": "^0.10.7",
    "@angular/cli": "~7.0.5",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/datatables.net": "^1.10.13",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.22",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "sonar-scanner": "^3.1.0",
    "sonarqube-scanner": "^2.5.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.11.0",
    "typescript": "~3.1.6"
}

}

(})

And this is my drop function but the error is throw before drop function:

(这是我的drop函数，但是错误是在drop函数之前抛出的：)

 // reorder drag

dropTable(event: CdkDragDrop) { const prevIndex = this.dsConditcl.filteredData.findIndex((d) => d === event.item.data);

(dropTable（event：CdkDragDrop）{const prevIndex = this.dsConditcl.filteredData.findIndex（（d）=> d === event.item.data）;)

// Only when editing a track circuit but not a condition if (this.checkedTcLimit && !this.processing) { this.modified = true;

(//仅当编辑轨道电路时，而不是条件时，如果（this.checkedTcLimit &&！this.processing）{this.modified = true;)

moveItemInArray(this.listConditcls, prevIndex, event.currentIndex);

(moveItemInArray（this.listConditcls，prevIndex，event.currentIndex）;)

for (let item = 0; item < this.listConditcls.length; item++) { // update ordenation this.listConditcls[item].ordenation = this.getOrdenation(item);

(for（让item = 0; item <this.listConditcls.length; item ++）{//更新序号this.listConditcls [item] .ordenation = this.getOrdenation（item）;)

} this.renderConditionTable();

(} this.renderConditionTable（）;)

} }

(}})

Any idea?

(任何的想法？)

Thanks in advance!

(提前致谢！)

  ask by Pedro Ramírez Pérez translate from so

Answer 1

等待大神答复