Блог

Возникли проблемы с выравниванием нижнего колонтитула в таблице угловых материалов. Казалось бы, необъяснимо.

Как вы можете видеть на скриншоте, два столбца нижнего колонтитула категорически отказываются правильно выравниваться. В настоящее время я заставил их все выровнять по левому краю в html, но, как вы видите, нижний колонтитул столбца «редактировать» и нижний колонтитул столбца «mon» остаются неисправными.

Определения столбцов определяются как:

   displayedColumns: string[] = [
    'edit', 'delete', 'project', 'site', 'location', 
    'shift', 'workpack', 'description', 'mon', 'tue', 
    'wed', 'thu', 'fri', 'sat', 'sun', 'total'
  ];

  dataSource = this.rows;
 

шаблон:

 <!---- header ----->
<div class="wrap">

  <table mat-table [dataSource]="rows" class="mat-elevation-z8">

    <ng-container matColumnDef="edit">
      <th mat-header-cell *matHeaderCellDef> Edit </th>
      <td mat-cell *matCellDef="let row"> <mat-icon>edit</mat-icon></td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="delete">
      <th mat-header-cell *matHeaderCellDef> Delete </th>
      <td mat-cell *matCellDef="let row"> <mat-icon>delete</mat-icon></td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>
  
    <ng-container matColumnDef="project">
      <th mat-header-cell *matHeaderCellDef > Project </th>
      <td mat-cell *matCellDef="let row"> {{row.project}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>
  
    <ng-container matColumnDef="site">
      <th mat-header-cell *matHeaderCellDef> Site </th>
      <td mat-cell *matCellDef="let row"> {{row.site}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="location">
      <th mat-header-cell *matHeaderCellDef> Location </th>
      <td mat-cell *matCellDef="let row"> {{row.location}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="shift">
      <th mat-header-cell *matHeaderCellDef> Shift </th>
      <td mat-cell *matCellDef="let row"> {{row.shift}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>
  
    <ng-container matColumnDef="workpack">
      <th mat-header-cell *matHeaderCellDef> Workpack </th>
      <td mat-cell *matCellDef="let row"> {{row.workpack}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef> Description </th>
      <td mat-cell *matCellDef="let row"> {{row.description}} </td>
      <th mat-footer-cell *matFooterCellDef style="text-align: left"> - </th>
    </ng-container>

    <ng-container matColumnDef="mon">
      <th mat-header-cell *matHeaderCellDef>Mon</th>
      <td mat-cell *matCellDef="let row" > {{row.mon}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{totals[6]}} </td>
    </ng-container>

    <ng-container matColumnDef="tue">
      <th mat-header-cell *matHeaderCellDef>Tue</th>
      <td mat-cell *matCellDef="let row"> {{row.tue}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[5] }} </td>

    </ng-container>

    <ng-container matColumnDef="wed">
      <th mat-header-cell *matHeaderCellDef>Wed</th>
      <td mat-cell *matCellDef="let row"> {{row.wed}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[4] }} </td>

    </ng-container>

    <ng-container matColumnDef="thu">
      <th mat-header-cell *matHeaderCellDef>Thu</th>
      <td mat-cell *matCellDef="let row"> {{row.thu}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[3] }} </td>

    </ng-container>

    <ng-container matColumnDef="fri">
      <th mat-header-cell *matHeaderCellDef>Frid</th>
      <td mat-cell *matCellDef="let row"> {{row.fri}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[2] }} </td>

    </ng-container>

    <ng-container matColumnDef="sat">
      <th mat-header-cell *matHeaderCellDef>Sat</th>
      <td mat-cell *matCellDef="let row"> {{row.sat}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[1] }} </td>

    </ng-container>

    <ng-container matColumnDef="sun">
      <th mat-header-cell *matHeaderCellDef>Sun</th>
      <td mat-cell *matCellDef="let row"> {{row.sun}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ totals[0] }} </td>
    </ng-container>

    <ng-container matColumnDef="total">
      <th mat-header-cell *matHeaderCellDef>Total</th>
      <td mat-cell *matCellDef="let row"> {{row.total}} </td>
      <td mat-footer-cell *matFooterCellDef style="text-align: left"> {{ grandTotal }} </td>
    </ng-container>

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

  </table>

</div>
 

и CSS

 .wrap {
    margin: auto;
    margin-top: 30px;
    width: 90%;
}

.mat-raised-button{
  margin-right: 20px;
}

mat-form-field {
  margin-right: 12px
}

table {
  width: 100%;
}
 

Эти столбцы остаются смещенными независимо от того, что я изменяю, включая изменение отображаемых столбцов нижнего колонтитула на чисто дни недели с фактическими итогами.

Буду признателен за любую помощь, поскольку я рву на себе волосы на этом!

Похоже, проблема заключается в следующем: https://github.com/angular/components/issues/11232

Я смог воссоздать вашу проблему, используя один компонент. Я использовал ваш шаблон и CSS. Вот определение компонента:

 import { Component, OnInit } from "@angular/core";

interface RowDef {
  edit: boolean;
  delete: boolean;
  project: string;
  site: string;
  location: string;
  shift: string;
  workpack: string;
  description: string;
  mon: number;
  tue: number;
  wed: number;
  thu: number;
  fri: number;
  sat: number;
  sun: number;
  total: number;
}

@Component({
  selector: "app-table-align",
  templateUrl: "./table-align.component.html",
  styleUrls: ["./table-align.component.css"],
})
export class TableAlignComponent implements OnInit {
  rows: RowDef[] = [
    {
      edit: true,
      delete: true,
      project: "Project",
      site: "MySite",
      location: "Bulgaria",
      shift: "first",
      workpack: "2002",
      description: "nadda",
      mon: 0,
      tue: 0,
      wed: 0,
      thu: 0,
      fri: 0,
      sat: 0,
      sun: 0,
      total: 0,
    },
  ];

  displayedColumns: string[] = [
    "edit",
    "delete",
    "project",
    "site",
    "location",
    "shift",
    "workpack",
    "description",
    "mon",
    "tue",
    "wed",
    "thu",
    "fri",
    "sat",
    "sun",
    "total",
  ];

  totals: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  grandTotal: number;

  dataSource = this.rows;

  constructor() {
    this.grandTotal = this.totals.reduce((a, b) => a   b, 0);
  }

  ngOnInit(): void {}
}
 

На прилагаемом скриншоте показано, что CSS, похоже, применяется к разным столбцам в верхнем и нижнем колонтитулах, что приводит к тому, что вы видите.

У меня такая же проблема в одном из моих приложений. Я собираюсь попробовать переопределить CSS для 11232, чтобы посмотреть, поможет ли это.