2

データの表示とデータの受信の両方を行う Angular コンポーネントを作成しようとしています。入力タイプのフォーム フィールドと {{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;
}

私の問題は、入力モードを使用すると、列の幅が正しく設定されないことです。一方、出力モードは次の図に示すように正しく機能します。 2つのテーブルが並んでいます

私は情報をカバーしなければなりませんでしたが、右側は一種のランダムな幅を持つ最初の列の入力モードで、左側は幅が正しく設定された出力モードです。

私のコンポーネントのコード:

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

他のものと同じように、入力を含むテーブルの最初の列のサイズを設定するにはどうすればよいですか?

4

1 に答える 1

4

ここで完全なデモを確認できます

上部にトグルを追加したので、狙っている正確な影響を確認できます...

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; }
于 2019-04-02T10:53:31.870 に答える