Почему при реализации 2 Mat-Table на той же странице смена цвета строки и не работает paginator? - PullRequest
Новая
       9

Почему при реализации 2 Mat-Table на той же странице смена цвета строки и не работает paginator?

1 голос
/ 11 апреля 2019

Я попытался изменить цвет строки при событии редактирования клика с кодом ниже и работает нормально 

  <table mat-table [dataSource]="dataSourceUsersTbl" class=" full-width users-grid" matSort>
    <ng-container matColumnDef="fullname">
    <th mat-header-cell *matHeaderCellDef class="fullName-col" mat-sort-header> Full Name </th>
    <td mat-cell *matCellDef="let element" class="fullName-col"> {{element.fullname}} </td>
     </ng-container>
      <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef class="action-col"> Actions </th>
      <td mat-cell *matCellDef="let element" class="action-col">
        <button mat-icon-button matTooltip="Edit" (click)="openEditDialog(element)">
       <i class="material-icons">edit</i>
        </button>          
       </td>
       </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumnsUsers; sticky: false"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumnsUsers;" 
    [ngClass]="{ row-edited': selectedRowIndex == element.userid}"></tr>
   </table>
   <mat-paginator #MatPaginator1 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons class="dino-grid-paging">
    </mat-paginator>

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

UsersMasterComponent.html:61 ERROR TypeError: Cannot read property   'userid' of undefined
at Object.eval [as updateDirectives] (UsersMasterComponent.html:62)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
at checkAndUpdateView (core.js:23306)
at callViewAction (core.js:23547)
at execEmbeddedViewsAction (core.js:23510)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23547)
at execComponentViewsAction (core.js:23489)
at checkAndUpdateView (core.js:23312)
at callViewAction (core.js:23547)

также в 1-й сетке разбивки на страницы это дает счетчик строк второй строки сетки.

В части компонента я также попытался сделать некоторый код, как показано ниже, и различать их с MatPaginator1 и MatPaginator2, но все еще не работает

@ViewChild('MatSort1') MatSort1: MatSort;
@ViewChild('MatPaginator1') MatPaginator1: MatPaginator;
@ViewChild('MatSort2') MatSort2: MatSort;
@ViewChild('MatPaginator2') MatPaginator2: MatPaginator;


ngOnInit() {
  this.dataSourceUsersTbl.sort = this.MatSort1;
  this.dataSourceUsersTbl.paginator = this.MatPaginator1;
  this.dataSourceAssignPermission.sort = this.MatSort1;
  this.dataSourceAssignPermission.paginator = this.MatPaginator2;
}

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

Примечание: эта проблема возникает, когда я реализую 2 таблицы матов вна одной странице, при применении одного матового стола мои вещи работают нормально.

Для получения дополнительной информации, пожалуйста, просмотрите эту ссылку https://stackblitz.com/edit/angular-c79ptl

1 Ответ

1 голос
/ 11 апреля 2019

попробуйте вызвать элемент во второй таблице element2 или другое имя, отличное от первого элемента. Чтобы не было такой же проблемы, я бы поместил каждую таблицу в отдельный компонент и предоставил данные, необходимые с помощью свойства @Input.

Вот, пожалуйста, https://stackblitz.com/edit/angular-5fvdgj

Вы должны были только написать 

@ViewChild('MatPaginator1') paginator: MatPaginator;

вы должны сделать то же самое для MatPaginator2

и в html перед MatPaginator1 вам нужно #, чтобы angular мог найти его по Id. тебе не нужно 

@ViewChild(MatPaginator1) paginator: MatPaginator;

без '' не требуется.

Вы должны сделать то же самое для сортировки. Но вместо # sort1 вам нужно написать # matSort1 = "matSort" то же самое для сортировки 2.

...