ngFor(인덱스를 속성 값으로 사용)

ngFor(인덱스를 속성 값으로 사용)

간단한 것이 있습니다.ngFor전류를 추적하는 루프index그것을 저장하고 싶습니다.index인쇄할 수 있도록 속성에 값을 입력합니다.하지만 이게 어떻게 작동하는지 모르겠어요.

저는 기본적으로 다음과 같습니다.

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

의 가치를 저장하고 싶습니다.#i속성상data-index저는 여러 가지 방법을 시도해 보았지만 하나도 효과가 없었습니다.

여기 데모가 있습니다. http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview

어떻게 저장할 수 있습니까?index에 있어서의 가치.data-index속성?

다음 구문을 사용하여 인덱스 값을 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>

다음은 업데이트된 plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview 입니다.

각도 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>

---

Angular.io ▸ API ▸ NgForOf

• 묘사
• 로컬 변수

단위 테스트 예제

• ng_for_spec.ts

또 다른 흥미로운 예

• 그룹화

이에 대한 업데이트만 해도 티에리의 답변은 여전히 옳지만 다음과 관련하여 Angular2에 대한 업데이트가 있었습니다.

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

그#i = index지금이 되어야 할let i = index

편집/업데이트:

그*ngFor각 요소에 대해 지정할 수 있으므로 이 예에서는 다음과 같이 지정해야 합니다.

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

편집/업데이트

앵귤러 7/8

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

이미 이전에 답변이 된 것 같습니다만, 순서가 없는 목록을 채우는 경우에는 수정만 하면 됩니다.*ngFor반복하려는 요소에 포함됩니다.그래서 그것은 안에 있어야 합니다.<li>또한 Angular2는 이제let을 사용하여 변수를 선언합니다.

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

대부분의 사람들이 마주칠 사례를 보여주기 위해 이 늦은 답변을 추가합니다.목록의 마지막 항목만 확인하면 되는 경우last키워드:

<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
  <divider *ngIf="!last"></divider>
</div>

마지막 항목을 제외한 모든 항목에 구분자 구성요소가 추가됩니다.

아래 코멘트 때문에 나머지 사항을 추가하겠습니다.ngFor로컬 변수에 앨리어싱할 수 있는 내보낸 값(문서에 나와 있는 대로):

• $198: T: 반복 가능한 항목(ngForOf)의 개별 항목 값입니다.
• ngForOf: NgItable:반복 가능한 식의 값입니다.예를 들어 비동기 파이프(userStreams | async)를 사용할 때와 같이 표현식이 속성 액세스보다 복잡할 때 유용합니다.
• 색인: 번호:반복 가능한 현재 항목의 인덱스입니다.
• 개수: 숫자:반복 가능한 길이입니다.
• 첫 번째: 부울:항목이 반복 가능한 항목의 첫 번째 항목인 경우 참입니다.
• 마지막: 부울:항목이 반복 가능한 마지막 항목인 경우 참입니다.
• 짝수: 부울:항목의 반복 가능한 인덱스가 짝수인 경우 참입니다.
• 홀수: 부울:항목이 반복 가능한 항목에 홀수 색인이 있으면 참입니다.

이 해도 됩니다.[attr.data-index] 전으로그사것는하용냥적것▁use▁alt는▁just를 사용합니다.

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

[attr.data-index]를 직접 사용하여 Angular 버전 2 이상에서 사용할 수 있는 데이터 인덱스 속성에 인덱스를 저장할 수 있습니다.

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

배꼽이 있는 페이지로 된 페이지를 길게 해서.

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>

사용해 보세요.

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>

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>

언급URL : https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute