Angular 7 Отображать заголовки таблицы программно - * ngFor и * ngIf на одном и том же селекторе - PullRequest
Новая
       14

Angular 7 Отображать заголовки таблицы программно - * ngFor и * ngIf на одном и том же селекторе

0 голосов
/ 19 марта 2019

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

sampleTable: {
headers: [{
  name: 'Description',
  isHidden: false
}, {
  name: 'Active',
  isHidden: false
}, {
  name: 'Code',
  isHidden: false
}, {
  name: 'recordId',
  isHidden: true,
}]
}

В этом примере заголовок называется "recordId "установлен на hidden = true, что означает, что он должен NOT DISPLAY

Я пробовал очевидное: 

<tr>
  <th>Fixed Column start</th>
  <th *ngFor="let header of sampleTable.headers" *ngIf="!header.isHidden">{{header.name}}</th>
  <th>Fixed Column end</th>
</tr>

Angular не поддерживает 2 структурные директивы для одного и того же элемента.

Впоследствии я попытался: 

<tr>
  <th>Fixed Column start</th>
   <template *ngFor="let header of resourceConfiguration.headers">
      <th *ngIf="header.isHidden === true" [nzWidth]="header.width" nzAlign="left">{{header.name}}</th>
    </template>
  <th>Fixed Column end</th>
</tr>

Но он отображает только 2 фиксированных столбца.

Как можно скрыть программно скрыть некоторые столбцы?

Я знаю, что есть несколько других подобных вопросов, но я не мог найти решение этой проблемы, хотя она выглядит прямо вперед.Фиксированные столбцы в начале и конце усложняют это.

Таблица является компонентом многократного использования и на основе объекта конфигурации должна отображать разные столбцы.

1 Ответ

0 голосов
/ 19 марта 2019

Я думаю, что все, что вы пытаетесь достичь, уже решено, и у вас будет много доступных функций.Я бы выделил возможность создания пользовательских поведений для этого компонента.

Я рекомендую Angular DataTables https://l -lin.github.io / angular-datatables / # / Getting-Start

Если вам нужна помощь с реализацией, не стесняйтесь, напишите мне.Счастливое кодирование

...