Angular 模板内嵌套循环的索引

Question

我在 table 中有一个嵌套循环，但我只想在 DOM 中显示有限数量的行，并在单击按钮时加载更多行。

循环看起来像这样：

<ng-container *ngFor="let organisation of organisations; let organisationIndex = index;">
    <ng-container *ngFor="let department of organisation.departments; let departmentIndex = index;">
        <ng-container *ngFor="let user of department.users; let userIndex = index;">
            <div>
                This is a List entry and i only want this 20 times in total (not for each loop)
            </div>
        </ng-container>
    </ng-container>
</ng-container>

在不增加复杂性的情况下，在嵌套循环中获取索引的最流畅方法是什么？

我不想用 css :nth-of-type 或类似的东西来做，因为我的数据集很大而且 dom 变慢，即使元素被隐藏 css.

每个数组的长度都是动态的，这使我无法制作静态公式（如 organizationIndex * 50）。

Answer 1

如何处理这个问题有多种选择：

服务器预处理 Trim 服务器上的数据和发送到客户端的数据只设置您想要渲染的。优点是客户端的浏览器不必处理大量数据（并下载它们）。或者在每个用户上引入一个“totalIndex”，它在组织中是递增的和连续的。

Angular 修剪 - 子集合中的项目数量相等

如果您的子集合中的项目包含相同数量的项目。你必须乘以索引并检查你是否已经输出了 20 行。如果是这样，请使用 *ngIf 以避免显示更多。使用 *ngIf 项目时根本不会呈现。

<ng-container *ngFor="let organisation of organisations; let organisationIndex = index;">
    <ng-container *ngFor="let department of organisation.departments; let departmentIndex = index;">
        <ng-container *ngFor="let user of department.users; let userIndex = index;">
            <div *ngIf="(organisationIndex * organisation.departments.length) + (departmentIndex * department.users.length) + userIndex < 20">
                This is a List entry and i only want this 20 times
            </div>
        </ng-container>
    </ng-container>
</ng-container>

Angular 微调 - 副管 如果子集合中的项目数不相等，请使用 counterpipe.

import { Pipe, PipeTransform } from '@angular/core';
import { Counter } from './counter';

const counters = new WeakMap<any, Counter>();

@Pipe({
  name: 'counterPipe'
})
export class CounterPipe implements PipeTransform  {
  transform(value: any): Counter {
    if (!counters.has(value)) {
      counters.set(value, new Counter());
    }
    return counters.get(value);
  }
}

这将在处理 *ngFor 中的实体时添加计数器，因此您始终知道正在渲染的元素数量。

用这个管道包装你的代码：

<ng-container *ngFor="let counter of [organisations | counterPipe]">
  <ng-container *ngFor="let organisation of organisations; let organisationIndex = index;">
      <ng-container *ngFor="let department of organisation.departments; let departmentIndex = index;">
          <ng-container *ngFor="let user of department.users; let userIndex = index;">
              <div *ngIf="counter.inc() < 20">
                This is a List entry and i only want this 20 times
              </div>
          </ng-container>
      </ng-container>
  </ng-container>
</ng-container>

用法示例见https://stackblitz.com/edit/angular-nested-ngfor-ydvxjv

Angular 模板内嵌套循环的索引

Angular Index of nested loop inside Template

angular-template

ngfor

angular

array-indexing