Я пытаюсь изменить размер отдельных столбцов углового материала 6 изгибаемого стола.Я использовал метод resize, где в ширине столбца я назначаю, но все столбцы изменяют размер, когда я пытаюсь изменить размер одного столбца.Вот stackblitzlink .
Это код метода изменения размера
resizeTable(event: any, column: any) {
this.start = event.target;
this.pressed = true;
this.startX = event.pageX;
this.startWidth = this.start.clientWidth;
this.mouseMove(column);
}
mouseMove(column: any) {
this.resizableFnMousemove = <any>this.renderer.listen('document', 'mousemove', (event) => {
if (this.pressed) {
const width = this.startWidth + (event.pageX - this.startX);
const index = this.start.cellIndex;
column.width = width;
}
});
this.resizableFnMouseup = <any>this.renderer.listen('document', 'mouseup', (event) => {
if (this.pressed) {
this.pressed = false;
this.resizableFnMousemove();
this.resizableFnMouseup();
}
});
}
}
Ниже приведен HTML-код таблицы.
<h3>Basic Table</h3>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position" #col>
<mat-header-cell [ngStyle]="{'width': col.width > 0 ? col.width + 'px':'300px'}"
(mousedown)="resizeTable($event, col)" *matHeaderCellDef > No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name" col1>
<mat-header-cell [ngStyle]="{'width': col1.width > 0 ? col1.width + 'px':'300px'}" *matHeaderCellDef
(mousedown)="resizeTable($event, col1)"> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight" col2>
<mat-header-cell [ngStyle]="{'width': col2.width > 0 ? col2.width + 'px':'300px'}" *matHeaderCellDef
(mousedown)="resizeTable($event, col2)"> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol" col3>
<mat-header-cell [ngStyle]="{'width': col3.width > 0 ? col3.width + 'px':'300px'}" *matHeaderCellDef
> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Пожалуйста, помогитеЧтобы решить эту проблему, исправьте меня, если я ошибаюсь в реализации этого, и укажите, как отобразить значок изменения размера.Заранее спасибо.