在 Angular 模板语法中，当使用嵌套的 *ngFor（或 ngForOf）时是否可以跟踪较低级别项目的绝对计数？

Question

对不起，如果我在标题中解释得不好。我遇到的情况是，有一个组件显示数组中数组的内容，例如

Input() categories: {
  id: number;
  type: number;
  items: {
    id: number;
    type: number;
    display: string;
  }[];
}[];

项目数组的长度不是常量。

项目将显示在一个表面上扁平的列表中（独立于 "category"，后者基本上对用户隐藏），类别和项目都需要排序，即

<ng-container *ngFor="let category of categories | categorySort">
  <li *ngFor="let item of category.items | itemSort : category.type">
    <button (click)="doSomething(category.id, item.id)">
      {{ item.display }}
    </button>
  </li>
</ng-container>

但这是困难的部分：我需要跟踪正在显示的项目数量，以便我可以将其中一些（比如第 10 个项目之后的所有项目）标记为可隐藏，例如

<li *ngFor="let item of category.items | itemSort : category.type"
    [class.hideable]="itemNo >= 10">

我知道 ngFor 可以访问索引，但我不确定在这种情况下它会有多大用处，因为内部索引不知道先前类别中存在多少项目。

我知道如果完全在 JS/TS 中完成这会很容易（通过在 for 循环外部定义一些变量来计算项目，或者使用类似 Array.prototype.reduce 的东西） , 但我想弄清楚这是否可以完全在模板中完成。

感谢您的帮助！

Answer 1

我能想到的最好的方法就是这样做

首先得到变换后的数组

(categories | categorySort) as pipedArray

然后，使用reducer将总计数累加到当前索引

(pipedArray.slice(0, i).reduce(reducer, 0)+j) < 15

其中 j 是内循环的索引。

看起来像这样，

<ng-container *ngIf="(categories | categorySort) as pipedArray">
    <ng-container *ngFor="let category of pipedArray index as i">
        <ng-container *ngFor="let item of category.items | itemSort : category.type index as j">
            <li *ngIf="(pipedArray.slice(0, i).reduce(reducer, 0) + j) < 15">
                <button>
                    {{ item.display }}
                </button>
            </li>
        </ng-container>
    </ng-container>
</ng-container>

尽管

你仍然需要在你的组件中声明你的reducer函数class

public reducer = (accumulator, currentValue) => accumulator += currentValue.items.length;

在 Angular 模板语法中，当使用嵌套的 *ngFor（或 ngForOf）时是否可以跟踪较低级别项目的绝对计数？

In Angular template syntax, when using nested *ngFor (or ngForOf) is it possible to keep track of the absolute count of lower level items?

angular2-template

angular

Stackblitz