Угловой материал 6 гибкий стол для изменения размера колонки индивидуально с символом изменения размера - PullRequest
0 голосов
/ 11 декабря 2018

Я пытаюсь изменить размер отдельных столбцов углового материала 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>

Пожалуйста, помогитеЧтобы решить эту проблему, исправьте меня, если я ошибаюсь в реализации этого, и укажите, как отобразить значок изменения размера.Заранее спасибо.

...