Угловой 6 мат стол с использованием липкой колонки с гибким не работает - PullRequest
Новая
       29

Угловой 6 мат стол с использованием липкой колонки с гибким не работает

0 голосов
/ 10 декабря 2018

Я использую угловой 7, Материал 7

Я пытаюсь использовать липкий для определенного столбца, и он не работает,

заголовок становится липким, но ячейка не.

Мой HTML выглядит так: 

<mat-table [dataSource]="dataSourceVaccinations" matSort>
  <ng-container matColumnDef="Gender" sticky>
     <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
          <img [attr.src]="getGenderIcon(Gender)" />
        </mat-cell>
     </ng-container>
     <ng-container matColumnDef="IdentityNumber" sticky>
       <mat-header-cell *matHeaderCellDef mat-sort-header> מס' זהות </mat-header-cell>
         <mat-cell *matCellDef="let GetSummaryRecordsVaccinations" > {{IdentityNumber}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="CodeVaccinationsAllowed">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ניתן לחסן סיכום </mat-header-cell>
              <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <img [attr.src]="getIcon(CodeVaccinationsAllowed)"/> </mat-cell>
     </ng-container>
     <ng-container matColumnDef="שפעת">
        <mat-header-cell *matHeaderCellDef> שפעת </mat-header-cell>
              <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <div class="center">{{ClassDescription}}
                  <br/>{{VaccinationDate | date:'dd/MM/yyyy'}}
                </div>
              </mat-cell>
      </ng-container>
      <mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns; sticky:true"></mat-header-row>
            <mat-row class="mat-row-vaccination" *matRowDef="let row; columns: displayedVaccinationsAllColumns;" (click)="selection.select(row)"></mat-row>
  </mat-table>

mat-row-header объявлен с min-width для добавления горизонтальной прокрутки

Каждый из моих столбцов имеет определенную ширину, используякод, подобный следующему 

flex: 0 0 50px;

есть идеи, чтобы решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

угловой материал не работает, если мы делаем некоторые изменения ширины таблицы, поэтому в основном я поставил этот CSS, чтобы все столбцы имели одинаковую ширину 

.mat-header-cell, .mat-footer-cell, .mat-cell {
  min-width: 100px;
  box-sizing: border-box;
  text-align: center;

}

, и теперь он работает thaks

0 голосов
/ 13 декабря 2018

Я наконец-то решил проблему.

изменен дизайн материала в версии 7.1.1.

Чтобы использовать прикрепленный столбец, вам нужно использовать тег <table mat-table></table> вместо <mat-table></mat-table> и <th mat-header-cell>, <td mat-cell> вместо <mat-header-cell> и <mat-cell>

Этокак теперь выглядит мой стол: 

<table mat-table [dataSource]="dataSourceVaccinations" matSort>
  <ng-container matColumnDef="Gender" sticky>
     <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
        <td mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
          <img [attr.src]="getGenderIcon(Gender)" />
        </td>
     </ng-container>
     <ng-container matColumnDef="IdentityNumber" sticky>
       <th mat-header-cell *matHeaderCellDef mat-sort-header> מס' זהות </th>
         <td mat-cell *matCellDef="let GetSummaryRecordsVaccinations" > {{IdentityNumber}} </td>
     </ng-container>
     <ng-container matColumnDef="CodeVaccinationsAllowed">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ניתן לחסן סיכום </th>
              <td *matCellDef="let GetSummaryRecordsVaccinations">
                <img [attr.src]="getIcon(CodeVaccinationsAllowed)"/> </td>
     </ng-container>
     <ng-container matColumnDef="שפעת">
        <th mat-header-cell *matHeaderCellDef> שפעת </th>
              <td mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <div class="center">{{ClassDescription}}
                  <br/>{{VaccinationDate | date:'dd/MM/yyyy'}}
                </div>
              </td>
      </ng-container>
      <tr mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns; sticky:true"></tr>
            <tr mat-row class="mat-row-vaccination" *matRowDef="let row; columns: displayedVaccinationsAllColumns;" (click)="selection.select(row)"></tr>
  </table>
...