첫 번째, 마지막, 인덱스 루프에 대한 각도 2 ng

첫 번째, 마지막, 인덱스 루프에 대한 각도 2 ng

이 예에서 첫 번째 항목을 기본값으로 설정하려고 합니다. plunkr

다음 오류가 발생합니다.

    Unhandled Promise rejection: Template parse errors:
    TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup">
    <md-button-toggle [ERROR ->]*ngFor="let indicador of indicadores; #first = first" value="indicador.id" [checked]="first">"): ng:///AppModule/HomeComponent.html@35:78
    Parser Error: Unexpected token #, expected identifier, keyword, or string at column 31 in [let indicador of indicadores; #first = first] in ng:///AppModule/HomeComponent.html@35:78 ("<md-button-toggle *ngFor="let indicador of indicadores; #first = first" value="indicador.id" [ERROR ->][checked]="first">
    <span>{{ indicado"): ng:///AppModule/HomeComponent.html@35:153

무엇이 잘못되었습니까?

이 플랭크르를 확인해봐요.

변수에 바인딩할 때는 괄호를 사용해야 합니다.또한, 당신은 HTML의 요소에 대한 참조를 얻고 싶을 때 해시태그를 사용합니다. 그런 템플릿 내부의 변수를 선언하기 위해서가 아닙니다.

<md-button-toggle *ngFor="let indicador of indicadores; let first = first;" [value]="indicador.id" [checked]="first"> 

---

편집: Christopher Moore 덕분에: Angular는 다음과 같은 로컬 변수를 노출합니다.

• index
• first
• last
• even
• odd

Angular 6에서 수행되는 방법은 다음과 같습니다.

    <li *ngFor="let user of userObservable ; first as isFirst">
       <span *ngIf="isFirst">default</span>
    </li>

에서 변경된 내용을 확인합니다.let first = first로.first as isFirst

이것으로 당신은 어떤 인덱스도 얻을 수 있습니다.*ngFor각의 루프...

<ul>
  <li *ngFor="let object of myArray; let i = index; let first = first ;let last = last;">
    <div *ngIf="first">
       // write your code...
    </div>

    <div *ngIf="last">
       // write your code...
    </div>
  </li>
</ul>

이 별칭을 사용할 수 있습니다.

• index :number:let i = index개체의 모든 인덱스를 가져옵니다.
• first :boolean:let first = first개체의 첫 번째 인덱스를 가져옵니다.
• last :boolean:let last = last개체의 마지막 인덱스를 가져옵니다.
• odd :boolean:let odd = odd개체의 홀수 색인을 가져옵니다.
• even :boolean:let even = even개체의 고른 인덱스를 가져옵니다.

유감스럽게도 ngFor로 표시할 데이터베이스 항목이 많은 경우 last는 작동하지 않습니다.목록에 있는 항목에 {{last}}개를 추가하여 내용을 볼 수 있도록 하면 종종 마지막이 참이고 거짓으로 변경되는 것을 볼 수 있습니다.실제 마지막 항목이 표시되면 마지막 항목은 참으로 표시되고 위의 다른 항목은 모두 거짓으로 표시됩니다.이는 마지막 항목이 표시되지 않더라도 "마지막"이 참임을 의미합니다.

언급URL : https://stackoverflow.com/questions/44288434/angular-2-ngfor-first-last-index-loop