我有一个简单的ngFor循环,它还可以跟踪当前索引。我想把索引值存储在一个属性中,这样我就可以打印它了。

我基本上有这个:

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

我想将#I的值存储在属性数据索引中。我尝试了几种方法,但都没有奏效。

我这里有一个演示:http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

如何将索引值存储在数据索引属性中?


当前回答

您可以直接使用[attr.dataindex]将索引保存到Angular版本2和更高版本中提供的数据索引属性。

    <ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
         <li>{{item}}</li>
    </ul>

其他回答

我将使用此语法将索引值设置为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.

只是对此的更新,Thierry的回答仍然正确,但Angular2在以下方面进行了更新:

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <li>{{item}}</li>
</ul>

#i=索引现在应该让i=索引

编辑/更新:

*ngFor应该位于要foreach的元素上,因此在本例中应该是:

<ul>
  <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

编辑/更新

角度5

<ul>
  <li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>

edit/更新

角度7/8

<ul *ngFor="let item of items; index as i">
  <li [attr.data-index]="i">{{item}}</li>
</ul>

获取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>

我认为它之前已经得到了回答,但如果您正在填充无序列表,那么*ngFor将出现在您想要重复的元素中。所以它应该是insdide<li>。此外,Angular2现在使用let来声明变量。

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>

其他答案是正确的,但您可以完全省略[attr.data索引],只使用

<ul>
    <li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul