根据条件在 angular ngfor 循环中增加一个单独的计数器的方法

Question

我有一个 *ngFor 循环，我需要根据循环中的元素和特定条件递增一个 customCounterHERE 变量。因此，此 customCounter 变量将不同于该循环的索引。

我已经阅读了自定义属性指令，但我不确定这是否是我需要的以及如何使用它。任何想法和解决方案都会非常有帮助！

<tr *ngFor="let diff of cardList[i].Relations;">
  <td>{{diff.relationName | titlecase}}</td>
  <td>{{diff.relationType | titlecase}}</td>
  <td>{{diff.operation | titlecase}}</td>
  <td *ngIf="diff.relationName !== 'Contains'  && diff.relationName !== 'Houses' ">. 
    {{diff.name | titlecase}} 
  </td>
  <td *ngIf="diff.relationName === 'Contains' || diff.relationName === 'Houses'; " 
    style="color:black 
    (click)="showMoeFunc(i);toggleNestedDiff(i,customCounterHERE);"
  >
  <div style="display:flex" >
    <span>{{diff.name | titlecase}}</span>
    <button *ngIf="!showNested[i][customCounter]">
      <mat-icon class="hide-diff"[ngClass]="!showNested[i][customCounterHERE]?'hide- 
      diff':'rotateArrow hide-diff'"
      >
        arrow_right</mat-icon>
    </button>
    <button *ngIf="showNested[i][customCounterHERE]">
      <mat-icon class="hide-diff"[ngClass]="showNested[I] 
        [customCounterHERE]?'rotateArrow hide-diff':'hide-diff'"
      >
       arrow_right
      </mat-icon>
    </button>
  </div>
 </td>
 <td>{{diff.currentValue === '' ? '---' : diff.currentValue}}</td>
 <td>{{diff.newValue === '' ? '---' : diff.newValue}}</td>
</tr>

如果 diff.relationName === 'Contains' 我想增加 customCounterHere 并传递它的功能和需要的特定位置。

Answer 1

我认为您的逻辑过于复杂了。如果您使用以下命令单步执行数组：

*ngFor="let diff of cardList[i].Relations;"

那么您应该能够通过将它们附加到 diff 项目来处理任何计数器：

(click)="diff.customCounter++"

然后在您的逻辑中使用它：

[ngClass]="showNested[i][diff.customCounter]?...

根据条件在 angular ngfor 循环中增加一个单独的计数器的方法

way to increment a separate counter inside of a angular ngfor loop based on condition

angular

ngfor