循环并 HTML table in Angular

Question

我的循环有问题...我想显示一次 Belgique 值。该变量称为 PAYS_LIB.

这是 JSON 文件。路径 => REGROUPEMENT > ELEMENT > PAYS_LIB.

下面，多次创建 Belgique 值。我希望 Belgique 值显示一次。

我不知道该怎么做？？？

<ng-container *ngFor="let item of instrument.ELEMENT">
   <ng-container *ngIf="item.PAYS === 1 ">
      <tr style="background-color: #E7BCBC">
         <td colspan="7" style="text-transform: uppercase; font-weight: bold"> {{ item.PAYS_LIB }} </td>
         <td class="text-end item-price"> </td>
         <td class="text-end item-price"> </td>
         <td class="item-price"></td>
         <td class="item-price"></td>
      </tr>
      <tr>
         <td class="text-end"><a [routerLink]="[ '/portfolio/stocks_movement/' + item.SVM] ">{{ item.QUANTITY | cphFormatNum:'1.2-2' }}</a></td>
         <td><a [routerLink]="[ '/markets/details/' + item.SVM] "> {{ item.LABEL }}</a></td>
         <td>{{ item.CURRENCYVALO }}</td>
         ...
      </tr>
   </ng-container>
</ng-container>

非常感谢

Answer 1

NgForOF 提供了几个导出的值，比如 first，它们可以作为局部变量的别名，并在模板中使用。 first 是一个布尔值，当该项目是可迭代对象的第一个时为真。

将 first as isFirst 添加到 *ngFor，并在 Belgique 行添加 *ngIf="isFirst"。应该这样做。

<ng-container *ngFor="let item of instrument.ELEMENT; first as isFirst">
...
<tr *ngIf="isFirst" style="background-color: #E7BCBC">
...

查看所有可用于 *ngFor here

的导出值

循环并 HTML table in Angular

Loop and HTML table in Angular

angular