Виртуальный свиток в таблице, Angular9 - PullRequest
Новая
       24

Виртуальный свиток в таблице, Angular9

0 голосов
/ 27 февраля 2020

У меня проблема с таблицей при использовании cdk-virtual-scroll-viewport в Angular9. У меня есть 2 компонента (родитель и ребенок). В моем родительском компоненте у меня есть thead с именем столбцов и tbody, которые содержат дочерние компоненты-строки. Если я пытаюсь использовать виртуальную прокрутку, моя таблица становится такой: и функции не работают

enter image description here

Родительский компонент 

<table>
  <thead>
    <tr>
      <th *ngFor="let header of columns (click)="doSortByHeader(header.property)">
        <span>{{ header.text }}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <cdk-virtual-scroll-viewport [itemSize]="20">
      <tr *cdkVirtualFor="let user of users$ | async | sortBy: { property: tabHeaderName, direction: direction }"
        class="col redAsync"
        app-user-page
        [user]="user"
        [columns]="columns"
        (changeRole)="changeRoleUser(user, $event)"
        (changeAccess)="changeAccessUser(user)"
        (deleteById)="deleteUser(user)">
      </tr>
    </cdk-virtual-scroll-viewport>
    </tbody>
</table>

дочерний компонент 

@Component({
  selector: "tr[app-user-page]",
})
<td class="user"
  *ngFor="let col of columns; let i = index; let first = first; let last = last"
>
  <div *ngIf="first">
    <span>{{ user[col.property] }}</span>
  </div>
  <div *ngIf="col.property === 'surname'">
    <span>{{ user[col.property] }}</span>
  </div>
  <div *ngIf="col.property === 'age'">
    <span>{{ user[col.property] }}</span>
  </div>
  <div *ngIf="col.property === 'email'">
    <span>{{ user[col.property] }}</span>
  </div>
  <div *ngIf="col.property === 'roles'">
    <select
      (change)="editRoleUser($event.target.value)"
      [(ngModel)]="user[col.property]"
    >
      <option value="USER_ROLE">USER</option>
      <option value="ADMIN_ROLE">ADMIN</option>
    </select>
  </div>
  <div *ngIf="col.property === 'isVerified'" (click)="editAccessUser()" class="user_access"
  [ngClass]="{
    'user_access__ok': user[col.property],
    'user_access__no': !user[col.property]
  }">
    <span>{{ changeName(user[col.property]) }}</span>
  </div>
  <div *ngIf="col.property === 'createdAt'">
    <span>{{ changeDateToDDMMYYYY(user[col.property]) }}</span>
  </div>
  <div *ngIf="last">
    <span>
      <button (click)="editUser()">Edit</button>
      <button (click)="deleteUser()">Delete</button>
    </span>
  </div>
</td>
...