Question

我正在开发一个Angular 4应用程序，并希望仅在totalYears <= 7时显示一列。我在ngFor元素中有ngIf和th。我目前收到错误。我该如何处理？

<table class="table">
  <thead>
    <tr>
      <th></th>
      <!-- <ng-container *ngIf="yearList.length > 6">  -->
      <th *ngIf="totalYears <=7" *ngFor="let year of yearList"> {{year}}</th>
      <!-- </ng-container> -->
      <th>Remaining Years</th>
    </tr>
  </thead>
</table>

Answer 1

Angular不支持同一元素上的多个结构指令。

您的ngFor元素也有ngIf和th：

<th *ngIf="totalYears<=7" *ngFor="let year of yearList">{{year}}</th>

你可以这样做：

<ng-container *ngIf="totalYears<=7">
    <th *ngFor="let year of yearList">{{year}}</th>                                
</ng-container>

来源：https://angular.io/guide/structural-directives#one-per-element

此外：此模板视图中应该可以访问totalYears。例如，尝试打印像{{totalYears}}这样的totalYears进行调试。

根据Angular中的条件显示列

1 个答案: