mat-table 包含输入时列宽不变

Question

我正在尝试制作一个 Angular 组件来显示数据和接收数据。我制作了一个带有输入类型表单字段的 mat-table 和带有 {{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;
}

我的问题是，当我使用输入模式时，列宽设置不正确。另一方面，输出模式正常工作，如下图所示：

我必须覆盖这些信息，但右侧是输入模式，第一列具有一种随机宽度，左侧是宽度设置正确的输出模式。

我的组件代码 :

  <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;
}

如何设置包含输入的 table 中的第一列大小，就像其他输入一样？

Answer 1

您可以检查complete demo here

我在顶部添加了一个开关，这样您就可以检查您想要达到的确切效果...

我们不得不覆盖设置为 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; }

mat-table 包含输入时列宽不变

mat-table columns width not changing when they contain an Input

css

angular

typescript

angular-material

angular-material-table