Ширина столбцов таблицы mat не изменяется, если они содержат входные данные - PullRequest
Новая
       19

Ширина столбцов таблицы mat не изменяется, если они содержат входные данные

1 голос
/ 01 апреля 2019

Я пытаюсь создать угловой компонент для отображения и получения данных. Я создал таблицу соответствия с полями формы ввода и регулярным отображением данных с помощью {{element.value}}. И я установил ширину каждого столбца по-разному так: 

.mat-column-v{
  width: 32%!important;
}

.mat-column-w{
  width: 17%!important;
}

.mat-column-x{
  width: 17%!important;
}

.mat-column-y{
  width: 17%!important;
}

.mat-column-z{
  width: 17%!important;
}

Моя проблема в том, что когда я использую режим ввода, ширина столбцов не установлена ​​правильно. С другой стороны, режим вывода работает правильно, как показано на этом рисунке: two tables side by side

Я должен был охватить информацию, но справа находится режим ввода с 1-м столбцом, имеющим вид произвольной ширины, а слева - режим вывода, где ширина установлена ​​правильно.

Код моего компонента : 

  <table mat-table [dataSource]="data">
    <!-- v Column -->
    <ng-container matColumnDef="v">
      <th mat-header-cell *matHeaderCellDef> v </th>
      <td mat-cell *matCellDef="let element"> {{element.v}} </td>
    </ng-container>

    <!-- w Column -->
    <ng-container matColumnDef="w">
      <th mat-header-cell *matHeaderCellDef> w </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="type == 'input'">
           <mat-form-field>
            <input matInput [value]="element.w" [(ngModel)]="element.w">
           </mat-form-field>
        </ng-container>
       <ng-container *ngIf="type == 'output'"> {{element.w}} </ng-container>
     </td>
    </ng-container>

    <!-- x Column -->
    <ng-container matColumnDef="x">
      <th mat-header-cell *matHeaderCellDef> x </th>
      <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="type == 'input'">
           <mat-form-field>
             <input matInput [value]="element.x" [(ngModel)]="element.x">
           </mat-form-field>
         </ng-container>
        <ng-container *ngIf="type == 'output'"> {{element.x}} </ng-container>
      </td>
    </ng-container>

    <!-- y Column -->
    <ng-container matColumnDef="y">
      <th mat-header-cell *matHeaderCellDef> y </th>
      <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="type == 'input'">
           <mat-form-field>
             <input matInput [value]="element.y" [(ngModel)]="element.y">
           </mat-form-field>
         </ng-container>
        <ng-container *ngIf="type == 'output'"> {{element.y}} </ng-container>
      </td>
    </ng-container>

    <!-- z Column -->
    <ng-container matColumnDef="z">
      <th mat-header-cell *matHeaderCellDef> z </th>
      <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="type == 'input'">
           <mat-form-field>
             <input matInput [value]="element.z" [(ngModel)]="element.z">
           </mat-form-field>
         </ng-container>
        <ng-container *ngIf="type == 'output'"> {{element.z}} </ng-container>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="heads"></tr>
    <tr mat-row *matRowDef="let row; columns: heads;"></tr>
  </table>

CSS моего компонента : 

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 90%;
}

.mat-column-v{
  width: 32%!important;
}

.mat-column-w{
  width: 17%!important;
}

.mat-column-x{
  width: 17%!important;
}

.mat-column-y{
  width: 17%!important;
}

.mat-column-z{
  width: 17%!important;
}

Как установить размер первого столбца в таблице, содержащей входные данные, точно так же, как и другой?

1 Ответ

1 голос
/ 02 апреля 2019

Вы можете проверить полную демонстрацию здесь

Я добавил переключатель сверху, чтобы вы могли проверить точный удар, на который вы нацеливаетесь ...

нам пришлось переписать ширину по умолчанию для ввода, которая была установлена ​​в 180px ... мы сделали это, используя css ниже: 

::ng-deep .mat-column-w div.mat-form-field-infix,
::ng-deep .mat-column-x div.mat-form-field-infix,
::ng-deep .mat-column-y div.mat-form-field-infix,
::ng-deep .mat-column-z div.mat-form-field-infix { width: 17% !important; }
...