Colspan 未正确应用答案

【问题标题】：Colspan not getting applied correctlyColspan 未正确应用
【发布时间】：2019-05-23 23:12:03
【问题描述】：

我已经在 Angular 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。

【问题讨论】：

<table> 的结构在我看来是错误的。看起来您在一行中重复了多次 [colSpan]。

标签： html css angular

【解决方案1】：

尝试使用[attr.colspan]

例如：

[attr.colspan]="8"

【讨论】：

你试过我给你的小提琴吗，因为它在实际代码中对我不起作用

【解决方案2】：

将colspan 用作 1，看起来您正试图为每条记录分配一列。

Working Fiddle

【讨论】：

最后看不到多余的元素，到底是什么问题？\
把 colspan 的 7 或 8 放在小提琴中，你会看到它
我认为问题在于 for 循环

【解决方案3】：

您需要在 *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>

【讨论】：