我正在MatTable上使用拖放功能，但仅在第一次移动行时才遇到以下错误：
zone.js：192未捕获的TypeError：无法读取未定义的属性'clientRect' 在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 [作为_next]（drag-drop.es5.js：679） 在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub（Subscriber.js：196） 在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber.next（Subscriber.js：134） 在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next（Subscriber.js：77） 在Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.next（Subscriber.js：54） 在Subject.push ../ node_modules / rxjs / _esm5 / internal / Subject.js.Subject.next（Subject.js：47） 在HTMLDocument.handler（drag-drop.es5.js：226） 在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：421）
如果我再次移动一行，该问题将不会重现。
我在github上找到了这个主题，但是不一样，而且问题似乎并没有解决在angular 7上。
https://github.com/angular/components/issues/13077
此外，我发现该示例的拖放效果很好，但是我无法在我的代码中重现它，并且Angularversión为7： https://stackblitz.com/edit/table-drag-n-drop?file=app%2Ftable-basic-example.ts
这是我的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>
这是我的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"
}
}
这是我的drop函数，但是错误是在drop函数之前抛出的：
// reorder drag
dropTable(event: CdkDragDrop<Conditclimit[]>) {
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;
moveItemInArray(this.listConditcls, prevIndex, event.currentIndex);
for (let item = 0; item < this.listConditcls.length; item++) {
// update ordenation
this.listConditcls[item].ordenation = this.getOrdenation(item);
}
this.renderConditionTable();
}
}
有什么主意吗？
谢谢！