Question

我已经在angular 7中实现了一个动态表。如果您看到我正在生成重复的列。您将在每对第一对中看到“添加副词”。我要的是重复栏默认情况下应该隐藏，并且仅在单击其对的“添加副字母”按钮时才显示。

这是Jsfiddle https://jsfiddle.net/76w4zhnu/

HTML

<table class="fundClassesTable table-striped" border="1">
      <tr *ngFor="let c of ColumnNames">
        <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[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</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[2]">{{f.Id}}</td>
           <td class="tableItem" *ngIf="c == ColumnNames[3]">
              <button type="button" class="btn btn-default btn mr-1" style="float: left;">Add Side Letter</button>
           </td>
           <td class="tableItem" *ngIf="c == ColumnNames[3]">

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

组件

 public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID',''];

Answer 1

请检查您有关其他问题here的其他问题的答案

好吧，如果需要的话，请使用对象数组而不是两个数组编写更舒适的代码

columnsDef=[
  {description:'Legal Class name',key:'Description',duplicate:true},
  {description:'Last Edited',key:'AuditSummary',duplicate:true},
  {description:'Legal Class ID',key:'Id',duplicate:false}
]

还有您的.html

<table class="fundClassesTable table-striped" border="1">
    <tr *ngFor="let c of columnsDef;let i=index">
        <th class="tableItem bold">{{ c.description }}</th>
        <ng-container *ngFor="let f of data">
            <td>{{f[c.key]}}</td>
            <td *ngIf="c.duplicate">{{f[c.key]}}</td>
            <td><button (click)="c.duplicate=!c.duplicate">click</button></td>
        </ng-container>
    </tr>
</table>

根据Angular中按钮的单击隐藏和显示表的列

1 个答案: