Question

大家好，我已经使用索引嵌套了ngFor（参见下面的代码）。

<div *ngFor="let category of categoriesWithFoodies; let catIndex = index">
<span>{{catIndex}}</span>
<ul class="foodies-list">
    <li *ngFor="let foodie of category.foodies; let foodIndex = index">
        <span>{{foodIndex}}</span>
    </li>
</ul>

现在食物指数是这样的：

cat 1

食物1 食物2 食物3

cat 2

食物1 食物2

cat 3

食物1 食物2

我需要他们这样：

cat 1

食物1，食物2，食物3

cat 2

食物4，食物5

cat 3

食物6，食物7

你知道如何实现这个目标吗？

Answer 1

我认为这是添加angular pipe的理想场所。

所以我不是百分之百，这是最好的实现，但它背后的想法是返回fun main(args: Array<String>) { foo() foo { } foo { println("Bar") } } private val EMPTY: (Throwable) -> Unit = {} fun foo(onError: (Throwable) -> Unit = EMPTY) { if (onError === EMPTY) { // the default value is used } else { // a lambda was defined - no default value used } }的真实索引，无论你在父循环中的哪个位置。

category.foodies

所以这里我设置一个私有值（import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'realIndex', }) export class RealIndexPipe implements PipeTransform { private _lastIdx: number = 0; //store the last index transform(value: any, idx: number, last: boolean) { let returnNum: number = 0; if (last) { this._lastIdx = this._lastIdx + idx + 1; returnNum = this._lastIdx; } else { returnNum = idx + 1 + this._lastIdx; } return returnNum; } }），它将在一个循环中保存最后一个索引值，与父循环无关。因此，如果最后一项具有private _lastIndex的索引，那么将保持该值3以在下一次迭代中使用。然后在3条件中，使用新的最后一个索引值加上当前值last更新索引，再加上_lastIndex，以考虑索引从{{1}开始}。然后只是将该值返回给视图。

但如果它不是子循环中的最后一个，那么取1加上当前索引加0（再次考虑到索引从_lastIndex开始）。

然后在视图中我们可以将1添加到0并为循环值添加管道

last

基于*ngFor可能还有另一种方法可以根据功能更加理想。

Ionic / angular 2嵌套列表索引（编号）

1 个答案: