Question

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

Answer 1

尝试使用[attr.colspan]

例如：

[attr.colspan]="8"

Answer 2

将colspan设为1，似乎您正试图为每条记录分配一列。

Working Fiddle

Answer 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>

Colspan应用不正确

3 个答案: