Как создать создать эффект rowspan в таблице - PullRequest
Новая
       30

Как создать создать эффект rowspan в таблице

0 голосов
/ 08 ноября 2018

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

Результат, который я хочу, похож на this в деталях. Я хочу, чтобы все строки в первом столбце были вместе. Это код .html: 

    //This row all toogether in one td
    <tr *ngFor="let count of listCount">
      <ng-container *ngIf="check()">
        <td rowspan="?"....>
        <td>..
      </ng-container>
    </tr>

Проблема в том, что:

  1. Я не знаю rowspan что является его значением

Кто-нибудь может мне помочь?

Ответы [ 3 ]

0 голосов
/ 08 ноября 2018

Вы можете использовать [attr.rowspan], и вы можете визуализировать все td, выполняя цикл по columns (создать коллекцию столбцов), а также, если хотите, вы можете применять только столбцы rowspan к first. Не совсем уверен, что такое *ngIf="check()": (

<tr *ngFor="let count of listCount">
  <ng-container *ngFor="let column of columns;let first = first; let last = last;">
    <ng-container *ngIf="check()">
        <td [attr.rowspan]="first ? 2: 1"....>
        <td>..
    </ng-container>
  </ng-container>
</tr>
0 голосов
/ 08 ноября 2018

Если вы хотите, чтобы ваш столбец заполнял всю таблицу, вы должны установить для атрибута rowspan равное количество строк.
Для удобства вы можете использовать локальную переменную Angular ngFor first для проверки первой строки.
Вот демонстрация стека решения. 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <table>
      <tr *ngFor="let i of rows; let isFirstRow = first">
        <!-- only display first column if it is the first row and set rowspan attribute -->
        <td *ngIf="isFirstRow" [attr.rowspan]="rows.length">Column 1</td>
        <td>Row {{i}}, column 2</td>
        <td>Row {{i}}, column 3</td>
      </tr>
    </table>
  `,
  styles: [`
    td {
      padding: 15px;
      border: 1px solid;
    }
  `]
})
export class AppComponent
{
  rows = [ 1, 2, 3 ];
}

enter image description here

0 голосов
/ 08 ноября 2018

Если вы хотите, чтобы первый столбец охватывал все строки, вам нужно:

  1. Использование rowspan="listCount.length".
  2. Но только первый столбец. Чтобы узнать, является ли столбец первым, вы можете использовать let first = first в *ngFor.
  3. Поскольку счетчик rowspan будет динамическим, вам придется использовать синтаксис привязки атрибутов ([attr.rowspan]="listCount.length").

Попробуйте это: 

<tr *ngFor="let count of listCount; let first = first">
  <ng-container *ngIf="check()">
    <td *ngIf="first" [attr.rowspan]="listCount.length" ....>
    <td>..
  </ng-container>
</tr>

Вот Образец StackBlitz для вашей ссылки.

...