Угловой: таблица с заголовком и подзаголовком - PullRequest
Новая
       9

Угловой: таблица с заголовком и подзаголовком

1 голос
/ 21 октября 2019

Я пытаюсь создать таблицу с вложенными столбцами из массива объекта столбца, который сам может содержать вложенные столбцы.

Объект заголовка: 

export class ListHeader {
    id: string;
    label: string;
    type: int;
    subColumns?: ListHeader[];
}

Компонент таблицычастичный код 

columns: ListHeader[];
columnsWithSubColumns: ListHeader[];

constructor(){
   this.columns = [{
        id: "AC1",
        label: "AC1",
        type: 1
      },
      {
        id: "AC3",
        label: "AC3",
        type: 1
      },
      {
        id: "AC2",
        label: "AC2",
        type: 1,
        subColumns: [
          {
            id: "ColB",
            label: "ColB",
            type: 1
          },
          {
            id: "ColA",
            label: "ColA",
            type: 1
          },
          {
            id: "ColC",
            label: "ColC",
            type: 1
          }
        ]
      }
   ];
   this.columnsWithSubColumns = this.columns
            .filter(c => typeof c.subColumns !== 'undefined' && c.subColumns !== null && c.subColumns.length > 1);
}

HTML: 

<table>
    <thead>
        <tr>
            <th *ngFor='let key of columns' [id]='key.id'>
                {{ key.label }}
            </th>
        </tr>
        <tr>
            <th *ngFor='let key of columnsWithSubColumns '>
                <--! Can't figure how to do from there -->
            </th>
        </tr>
    </thead>
  <--! tbody, etc... -->
</table>

Я связал несколько решений, изменив HTML и / или базовый Typescript, но я не могу найти способ показатьправильно подколонки. Либо они отображаются в неправильном столбце, либо не отображаются вообще.

Я обнаружил рабочую статическую таблицу, которая действительно носила или меньше того, что я хочу (http://jsfiddle.net/8qycxkv9/),, но я ищучтобы сделать его динамичным.

Таким образом, я пытаюсь создать второй массив ListHeader из всех массивов subHeaders в Array столбцов. Мне удалось отфильтровать столбцы без вложенных столбцов, но не могу найтиспособ пойти дальше.

Я открыт для любой реализации, единственное ограничение - это объект ListHeader.

Ответы [ 2 ]

1 голос
/ 21 октября 2019

Вам необходимо использовать атрибут «colspan» в первом массиве, который означает, сколько подзаголовков будет под этим заголовком.

Вы получите что-то вроде этого: 

<table>
    <thead>
        <tr>
            <th *ngFor='let key of columns' [id]='key.id' colspan=key.subColumns.length>
                {{ key.label }}
            </th>
        </tr>
        <tr>
            <ng-container *ngFor='let key of columns'>
                <th *ngFor='let subheader of key.subColumns'>
                    {{subheader.label}}
                </th>
            </ng-container>
        </tr>
    </thead>
  <--! tbody, etc... -->
</table>

Если некоторые из ваших столбцов не имеют субтитров, вы можете сделать что-то вроде этого: 

<table>
    <thead>
        <tr>
            <ng-container *ngFor='let key of columns'>
                <th *ngIf='key.subColumns' [id]='key.id' [attr.colspan]=key.subColumns.length>
                    {{ key.label }}
                </th>
                <th *ngIf='!key.subColumns' [id]='key.id' [attr.rowspan]=2>
                    {{ key.label }}
                </th>
            </ng-container>
        </tr>
        <tr>
            <ng-container *ngFor='let key of columns'>
                <th *ngFor='let subheader of key.subColumns'>
                    {{subheader.label}}
                </th>
            </ng-container>
        </tr>
    </thead>
  <--! tbody, etc... -->
</table>

Тогда столбцы с субтитрами будут широкими, а столбцы без них будут высокими.

1 голос
/ 21 октября 2019

попробуйте это работает, как вы и планировали. 

<table>
  <thead>
      <tr>
          <ng-container *ngFor='let key of columns'>
              <th *ngIf='key.subColumns' [id]='key.id' [attr.colspan]=key.subColumns.length>
                  {{ key.label }}
              </th>
              <th *ngIf='!key.subColumns' [id]='key.id' [attr.rowspan]=2>
                  {{ key.label }}
              </th>
          </ng-container>
      </tr>
      <tr>
          <ng-container *ngFor='let key of columnsWithSubColumns'>
          <th *ngFor="let sub of key.subColumns">
            {{sub.label}}
          </th>
          </ng-container>
      </tr>
  </thead>
</table>
...