Colspan неправильно наносится

Question

Я сгенерировал динамическую таблицу на угловом 7. Я пытаюсь сделать colspan, который создает дополнительные элементы в конце. Не уверен почему? Также мне нужно, чтобы colspan был динамичным. например, столбцы могут быть любым числом. В зависимости от номера столбца должен применяться colspan. Если вы видите здесь, столбцы основаны на количестве записей

HTML:

<div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">


  <table class="fundClassesTable table-striped">
    <tr *ngFor="let c of ColumnNames">
      <th class="tableItem bold">{{ c }}</th>
      <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel">
        <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
        <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
        <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
        <td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
        <td class="tableItem" *ngIf="c == ColumnNames[4]">
          <button type="button" class="btn btn-default btn" style="float: left;" (click)="buttonClicked(f.Id)">Review Terms</button>
        </td>
        <td [colSpan]="8" class="tableItem" *ngIf="c == ColumnNames[5]"></td>
        <td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}</td>
        <td *ngIf="EditMode[f.Id]  && c == ColumnNames[6]" class="tableItem">
          <kendo-dropdownlist style="width:100%" [(ngModel)]="f.CurrencyId" [defaultItem]="defaultItem" class="form-control  form-control-sm" [data]="LegalFundClasses.Currencies" [filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
          </kendo-dropdownlist>
        </td>

      </ng-container>
    </tr>
  </table>

</div>

Скриншот:

Я делюсь jsfiddle .

Answer 1

Используйте colspan как 1, похоже, что вы пытаетесь назначить один столбец для каждой записи.

Рабочая скрипка

Answer 2

Вам необходимо включить индекс в ваш * ngIf и * ngFor. Вы перебираете td 7 раз и colspan = 8 для каждого из них. Таким образом, вы просто добавляете td на первой итерации.

    <table class="fundClassesTable table-striped" border="1">
      <tr *ngFor="let c of ColumnNames; let i = index">
        <th class="tableItem bold">{{ c }}</th>
        <ng-container *ngFor="let f of data">
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
           <td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
          <td class="tableItem" *ngIf="c == ColumnNames[4]">
              <button type="button" class="btn btn-default btn" style="float: left;"
                  (click)="buttonClicked(f.Id)">Review Terms</button>
          </td>
          <td [colSpan]="8" class="tableItem" *ngIf="c == ColumnNames[5] && i == 0"></td>
          <td  *ngIf="c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}</td>

        </ng-container>
      </tr>
      </table>

Answer 3

Попробуйте использовать [attr.colspan]

Например:

[attr.colspan]="8"