J'essaie d'afficher des données sur ma page Web avec un tableau de matériaux angulaire, mais la vue n'est pas si bonne que dois-je faire ? Je veux que la colonne redimensionnable et les données soient au bon endroit pas comme ça et en désordre

C'est mon code HTML qui montre toutes les données

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

C'est mon CSS que j'utilise

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

Et voilà le résultat. et le rendu n'a pas l'air bon du tout. Que dois-je faire? entrez la description de l'image ici

2
Nazanin 25 janv. 2020 à 11:49

1 réponse

Meilleure réponse

Vous utilisez le code HTML standard Angular Material V5. changez le code HTML (j'ai fourni ci-dessous) et supprimez le CSS.

Si vous utilisez la version angulaire 6 ou supérieure, alors 6 en utilisant le code HTML ci-dessous.

Réf - 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> -->

2
Nikhilesh Agrawal 25 janv. 2020 à 09:32