角度材料表调整列

Question

我试图在我的网页上显示一些带有角度材料表的数据，但视图看起来不太好，我该怎么办？ 我想让可调整大小的列和数据放在正确的位置，而不是那样混乱

这是显示全部数据的 HTML 代码

<mat-card>customer card</mat-card>
<div>
  <mat-table [dataSource]="dataSource" class="mat-elevation-z8"  class="table">
    <!-- Position Column -->
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> firstName </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
    </ng-container>


    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> lastName </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>


    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> email </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
    </ng-container>


    <ng-container matColumnDef="phoneNumber">
      <mat-header-cell *matHeaderCellDef> phoneNumber </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.phoneNumber}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="orderStatus">
      <mat-header-cell *matHeaderCellDef> orderStatus </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.orderStatus}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="deliveryDate">
      <mat-header-cell *matHeaderCellDef> deliveryDate </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.deliveryDate}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="storeName">
      <mat-header-cell *matHeaderCellDef> storeName </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.storeName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="storeAddress">
      <mat-header-cell *matHeaderCellDef> storeAddress </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.storeAddress}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="storePhone">
      <mat-header-cell *matHeaderCellDef> storePhone </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.storePhone}} </mat-cell>
    </ng-container>



   <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef >price</th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field>
          <input [(ngModel)]="element.price" matInput placeholder="Price" name="price">
        </mat-form-field>
      </td>
    </ng-container> 

    <ng-container matColumnDef="save">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <button (click)="post(element.price)" mat-button>save</button></td>
    </ng-container> 

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

  </mat-table>
  <!-- <button (click)="post(price)" mat-button>save</button> -->
</div>

这是我使用的 CSS

.mat-table {
  width: 100%;
  overflow: auto;
}

mat-cell,
mat-footer-cell,
mat-header-cell {
  width: 200px;
  flex: none;
  justify-content: center;
}

.mat-table mat-cell:first-child {
  padding-left: 0px;
  border-left: 1px solid;
}

.mat-table mat-cell:last-child {
  padding-right: 0px;
}

.mat-table mat-header-cell:first-child {
  padding-left: 0px;
  border-left: 1px solid;
}

.mat-table mat-header-cell:last-child {
  padding-right: 0px;
}

.mat-table mat-header-cell {
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  cursor: col-resize;
}

.mat-table mat-cell {
  border-right: 1px solid;
  border-bottom: 1px solid;
}

这就是结果。并且输出看起来并不好。我应该怎么办？

Answer 1

您正在使用 Angular Material V5 标准 HTML 代码。更改 HTML（我在下面提供）并删除 CSS。

如果您使用 Angular 版本 6 或更高版本，则使用以下 HTML 版本 6。

参考 - https://material.angular.io/components/table/overview

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


    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef> lastName </th>
      <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
    </ng-container>


    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>


    <ng-container matColumnDef="phoneNumber">
      <th mat-header-cell *matHeaderCellDef> phoneNumber </th>
      <td mat-cell *matCellDef="let element"> {{element.phoneNumber}} </td>
    </ng-container>

    <ng-container matColumnDef="orderStatus">
      <th mat-header-cell *matHeaderCellDef> orderStatus </th>
      <td mat-cell *matCellDef="let element"> {{element.orderStatus}} </td>
    </ng-container>

    <ng-container matColumnDef="deliveryDate">
      <th mat-header-cell *matHeaderCellDef> deliveryDate </th>
      <td mat-cell *matCellDef="let element"> {{element.deliveryDate}} </td>
    </ng-container>

    <ng-container matColumnDef="storeName">
      <th mat-header-cell *matHeaderCellDef> storeName </th>
      <td mat-cell *matCellDef="let element"> {{element.storeName}} </td>
    </ng-container>

    <ng-container matColumnDef="storeAddress">
      <th mat-header-cell *matHeaderCellDef> storeAddress </th>
      <td mat-cell *matCellDef="let element"> {{element.storeAddress}} </td>
    </ng-container>

    <ng-container matColumnDef="storePhone">
      <th mat-header-cell *matHeaderCellDef> storePhone </th>
      <td mat-cell *matCellDef="let element"> {{element.storePhone}} </td>
    </ng-container>



   <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef >price</th>
      <td mat-cell *matCellDef="let element">
        <mat-form-field>
          <input [(ngModel)]="element.price" matInput placeholder="Price" name="price">
        </mat-form-field>
      </td>
    </ng-container> 

    <ng-container matColumnDef="save">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <button mat-button>save</button>
    </td>
    </ng-container> 

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

  </table>
  <!-- <button (click)="post(price)" mat-button>save</button> -->