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

您可以在条件标签和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

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

2 个答案: