*ngFor 명령 각도

*ngFor 명령 각도

2022-06-01 last update

4 minutes reading Angular
NgFor는 내장된 템플릿 명령어로 그룹이나 대상과 같은 내용을 쉽게 교체하고 항목마다 템플릿을 만들 수 있습니다.
이 기둥은 각도 2 이상 포함
다음은 사용 사례입니다.
<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>
이것은 다음과 같은 html를 출력합니다.
<ul>
  <li>Al Dente</li>
  <li>D. Liver</li>
  <li>Pepe Roni</li>
</ul>
  • 템플릿에서 사용할 수 있는 로컬 변수를 만들 수 있습니다.
  • 사용자는 구성 요소에 제공해야 할 사용자iterable를 교체할 것을 의미합니다.
  • ngFor 이전의 * 문자는 부모 템플릿을 만듭니다.이것은 다음 문법의 단축키입니다.template = "ngFor let item of items".
  • 사용 가능한 로컬 변수


    색인, 첫 번째, 마지막 번째, 짝수 및 홀수 등의 내보내기 값에 대한 로컬 변수를 설정할 수도 있습니다.index는 현재 순환 인덱스를 되돌려줍니다. 다른 값은 이 값이true인지false인지 표시하는 부울 값을 제공합니다.예:
    <ul>
      <li *ngFor="let user of users; let i = index; let odd = odd"
          [class.odd]="odd">
        {{i + 1}}. {{ user.name }}
      </li>
    </ul>
    
    다음 태그가 생성됩니다.
    <ul>
      <li>1. Al Dente</li>
      <li class="odd">2. D. Liver</li>
      <li>3. Pepe Roni</li>
    </ul>
    

    참조

  • *ngIf
  • ngSwitch