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

이 예제에서 첫 번째 항목을 기본값으로 설정하려고합니다. 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

뭐가 잘못 되었 니??

이 plunkr를 확인하십시오 .

변수에 바인딩 할 때는 대괄호를 사용해야합니다. 또한 템플릿 내에서 변수를 선언하는 것이 아니라 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으로 ANGULAR의 루프에서 모든 인덱스를 얻을 수 있습니다 ...

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

이 별칭을 다음에서 사용할 수 있습니다. *ngFor

• 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객체의 인덱스를 가져옵니다.