我有一个简单的ngFor循环，它还可以跟踪当前索引。我想把索引值存储在一个属性中，这样我就可以打印它了。
我基本上有这个：
<ul *ngFor="#item of items; #i = index" data-index="#i">
<li>{{item}}</li>
</ul>
我想将#I的值存储在属性数据索引中。我尝试了几种方法，但都没有奏效。
我这里有一个演示：http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview
如何将索引值存储在数据索引属性中？
当前回答
我将使用此语法将索引值设置为HTML元素的属性：
角度>=2
您必须使用let来声明值，而不是#。
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
角度=1
<ul>
<li *ngFor="#item of items; #i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
以下是更新的plunker：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.
其他回答
我将使用此语法将索引值设置为HTML元素的属性：
角度>=2
您必须使用let来声明值，而不是#。
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
角度=1
<ul>
<li *ngFor="#item of items; #i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
以下是更新的plunker：http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.
获取API调用
@Injectable({
providedIn: 'root',
})
export class ApiService {
private readonly postsSubject = new BehaviorSubject<any>(null);
readonly postsResult$ = this.postsSubject.asObservable();
get postsResult(): any {
return this.postsSubject.getValue();
}
set postsResult(posts: any) {
this.postsSubject.next(gifRes);
}
constructor(private http: HttpClient) {}
getSearchResult(): Observable<any> {
this.postsResult = this.http.get<any>('https://jsonplaceholder.typicode.com/posts');
}
}
用于获取postResult的索引
<div *ngFor="let post of apiService.postsResult$ | async; let i = index">
{{i}} - {{post.title}}
<div>
在角度5/6/7/8中：
<ul>
<li *ngFor="let item of items; index as i">
{{i+1}} {{item}}
</li>
</ul>
在旧版本中
<ul *ngFor="let item of items; let i = index">
<li>{{i+1}} {{item}}</li>
</ul>
角度.io▸ 美国石油学会▸ NgForOf公司
描述局部变量
单元测试示例
ng_for_spec.ts格式
另一个有趣的例子
分组
我认为它之前已经得到了回答，但如果您正在填充无序列表，那么*ngFor将出现在您想要重复的元素中。所以它应该是insdide＜li＞。此外，Angular2现在使用let来声明变量。
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
添加这个迟到的答案，以显示大多数人会遇到的情况。如果您只需要查看列表中的最后一项，请使用最后一个关键字：
<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
<divider *ngIf="!last"></divider>
</div>
这将为除最后一项之外的每个项添加分隔符组件。
由于下面的注释，我将添加可以别名为本地变量的ngFor导出值的其余部分（如文档中所示）：
$implict:T：可迭代的（ngForOf）。ngForOf:NgIterable：可迭代表达式的值。当表达式比属性访问更复杂时，例如当使用异步管道（userStreams|async）时，这很有用。index:number：可迭代项中当前项的索引。count：number：可迭代的长度。first：boolean：当项是可迭代项中的第一个项时为True。last：boolean：当项是可迭代项中的最后一项时为True。even：boolean：当项在可迭代项中具有偶数索引时为True。odd:boolean：当项在可迭代项中具有奇数索引时为True。
