как установить условие в липком угловом столе - PullRequest
0 голосов
/ 20 сентября 2019

В моем случае данные динамически загружают таблицу.Столбец даты установлен как липкий, а последний столбец использует stickyEnd, но как установить условие.Все условия работают нормально, но не работают sticky и stickyEnd.

sticky и stickyEnd определяют в tableHeader в файле table.ts.

<b>table.html
</b>
<table
  mat-table
  [dataSource]="data"
  class="mat-elevation-z8 mytable"
  matSort
  matSortActive="date"
  matSortDirection="asc"
  (matSortChange)="sortColumn($event)"
>
  <ng-container
    [matColumnDef]="column"
    *ngFor="let column of displayedColumns; let i = index"
    [sticky]="tableHeader[i][column]['sticky'] === 'YES' ? true : false"
[stickyEnd]="tableHeader[i][column]['stickyEnd'] === 'YES' ? true : false"
  >
    <th
      mat-header-cell
      *matHeaderCellDef
      mat-sort-header
      [disabled]="data?.length > 0 ? (tableHeader[i][column]['sort'] == 'YES' ? false : true) : true"
    >
      <ng-container *ngIf="tableHeader[i] && tableHeader[i][column]">
        {{ tableHeader[i][column]['title'] }}
        <i
          [ngClass]="tableHeader[i][column]['icon'] == 'YES' ? tableHeader[i][column]['iconClass'] : null"
          [matTooltip]="tableHeader[i][column]['tooltip'] == 'YES' ? tableHeader[i][column]['tooltipName'] : null"
        ></i>
      </ng-container>
    </th>
    <td
      mat-cell
      *matCellDef="let element"
      [innerHTML]="element[column]"
      (click)="tableHeader[i][column]['download'] == 'YES' && download(element['downloadinvoiceurl'])"
      [ngClass]="{
        link: tableHeader[i][column]['download'] == 'YES' || tableHeader[i][column]['addClass'] == 'YES',
        'word-break-all': tableHeader[i][column]['addClass'] == 'YES'
      }"
      [routerLink]="tableHeader[i][column]['view'] == 'YES' ? ['/' + element['id'] + '/report'] : []"
    ></td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: columnsToDisplay"
    (click)="openModal.emit(row)"
    data-description="history-table"
  ></tr>
</table>
<b>table.ts
</b>

tableHeader в наборе sticky и stickyEnd.

  this.tableHeader = [
          {
            date: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'Date',
              tooltip: 'YES',
              tooltipName:
                'Date on which this article was published by the author on PubSURE+. Click to sort either by newest or oldest.',
              sort: 'YES',
              sticky :'YES'
            }
          },
          {
            title: {
              icon: 'NO',
              iconClass: 'info-circle-white',
              title: 'Title',
              tooltip: 'YES',
              tooltipName: 'Title of the article'
            }
          },
          {
            rel: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'Rel',
              tooltip: 'YES',
              tooltipName:
                'The percentages show the relevancy of a particular article to that of your journal. Click to sort by most relevant or least relevant.',
              sort: 'NO'
            }
          },
          {
            pubsure: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'PubSURE',
              tooltip: 'YES',
              tooltipName:
                'PubThis denotes the PubSURE score which is based on various feature checks and guidelines necessary while submitting an article to a journal. Click to sort by highest or lowest.SURE',
              sort: 'YES'
            }
          },
          {
            country: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'Country',
              tooltip: 'YES',
              tooltipName: 'The country of origin of this article. Click to sort by alphabetical order.'
            }
          },
          {
            oa: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'OA',
              tooltip: 'YES',
              tooltipName: 'Is this an Open Access article?'
            }
          },
          {
            plag: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'Plag',
              tooltip: 'YES',
              tooltipName:
                'This denotes the quality of the article with regards to plagiarized content. Click to sort by Good or Poor.'
            }
          },
          {
            expire: {
              icon: 'YES',
              iconClass: 'info-circle-white',
              title: 'Expires in',
              tooltip: 'YES',
              tooltipName:
                'This denotes the time left for a particular article to expire from PubSURE+. An article is not visible after expiry. Click to sort by least time remaining or max. time remaining.',
              sort: 'YES'
            }
          },
          { bookmark: { icon: 'YES', iconClass: 'fa fa-bookmark',stickyEnd:'true' } }
        ];

как установить условно липко.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...