无法根据组件中的布尔值隐藏列标题

Question

我正在尝试根据组件中的布尔值显示和隐藏标题和行。我能够隐藏特定的 td 但无法隐藏特定的列。在下面的示例中，我试图隐藏包含 th 和 td 元素的 Last Edited 行。如果我将布尔变量设置为 false，则不会显示该列的 td，但我如何隐藏标题。如果我提出以下条件，它似乎不起作用

  <th *ngIf="c == ColumnNames[1] && showCol""

HTML

 <div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">
     <table class="fundClassesTable table-striped">
      <tr *ngFor="let c of ColumnNames">
        <th [ngClass]="c != ColumnNames[2] ? 'tableItem bold' : 'cellbgcolor'" >{{ c }}</th>
        <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1] && showCol">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td
        </ng-container>
      </tr>
    </table>
  </div>

组件

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

这是小提琴

https://jsfiddle.net/zyk9xhd1/9/

Answer 1

您可以在 th 和 td 标签中添加条件

<table class="fundClassesTable table-striped" border="1">
      <tr *ngFor="let c of ColumnNames" >
        <th *ngIf="c == ColumnNames[1] && showCol" [ngClass]="c != ColumnNames[2] ? 'tableItem bold' : 'cellbgcolor'" >{{ 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] && showCol">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
        </ng-container>
      </tr>
      </table>

https://jsfiddle.net/viethien/w5rq3ghv/16/

Answer 2

你最好把条件放在整体上tr

使用下面的代码，它只会显示基于组件中声明的布尔数组的行

  <tr *ngFor="let c of ColumnNames; let rowIndex = index">
  <ng-container *ngIf="rowVisibility[rowIndex]">
    <th [ngClass]="c != ColumnNames[2] ? 'tableItem bold' : 'cellbgcolor'" >{{ 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>
    </ng-container>
 </ng-container>
</tr>

component.ts

constructor(){

    //decide which row ro show
    public rowVisibility = [true, //1strow
     false, //2nd row
     true//3rd row
];

Example on jsfiddle