인덱스와 함께 ngFor 지시문을 사용하는 것과 관련된 주요 문제는 반복되는 데이터가 변경될 때 예기치 않은 결과가 발생할 수 있다는 것입니다. 이는 항목이 배열에서 추가되거나 제거될 때 인덱스가 자동으로 업데이트되지 않기 때문입니다. 따라서 인덱스 0에 새 항목이 추가되면 다른 모든 항목의 인덱스가 하나씩 아래로 이동합니다. 이로 인해 보기에 잘못된 데이터가 표시되거나 응용 프로그램에서 예기치 않은 동작이 발생할 수 있습니다.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. 이 코드 줄은 정렬되지 않은 목록을 만듭니다.
2. *ngFor 지시문은 항목 배열을 반복하고 목록의 각 항목을 표시하는 데 사용됩니다.
3. let 키워드는 루프 반복에서 현재 항목을 보유하는 "item"이라는 변수를 선언하는 데 사용됩니다.
4. let 키워드는 루프 반복에서 현재 항목의 인덱스를 보유하는 "i"라는 변수를 선언하는 데에도 사용됩니다.
5. 이 줄은 인덱스 번호(0부터 시작)와 함께 목록의 각 항목을 표시합니다.
각도는 무엇입니까
Angular는 단일 페이지 애플리케이션을 개발할 때 직면하는 많은 문제를 해결하기 위해 주로 Google과 개인 및 기업 커뮤니티에서 유지 관리하는 JavaScript 기반 오픈 소스 프런트 엔드 웹 애플리케이션 프레임워크입니다. JavaScript 구성 요소는 플랫폼 간 모바일 앱 개발에 사용되는 프레임워크인 Apache Cordova를 보완합니다. 풍부한 인터넷 애플리케이션에서 일반적으로 사용되는 구성 요소와 함께 클라이언트 측 MVC(모델-뷰-뷰 컨트롤러) 및 MVVM(모델-뷰-뷰 모델) 아키텍처를 위한 프레임워크를 제공하여 이러한 애플리케이션의 개발 및 테스트를 단순화하는 것을 목표로 합니다.
ngFor 요소
NgFor는 데이터를 반복하고 배열 또는 개체의 각 항목에 대한 템플릿을 만들 수 있는 Angular 구조 지시문입니다. 주어진 HTML 요소를 지정된 횟수만큼 반복하는 데 사용됩니다. NgFor는 배열, 객체 또는 문자열의 데이터를 표시하는 데 사용할 수 있습니다. 배열 또는 객체의 값을 기반으로 HTML 요소를 생성하는 데 사용할 수도 있습니다. NgFor는 일반적으로 ngIf 및 ngSwitch와 같은 다른 Angular 지시문과 함께 사용됩니다.
ngFor 요소의 인덱스를 얻는 방법
index 키워드를 사용하여 ngFor 루프에서 요소의 인덱스를 가져올 수 있습니다. 이에 대한 구문은 다음과 같습니다.
이 예에서 "i" 변수는 루프의 현재 인덱스를 포함합니다. 그런 다음 이 변수를 사용하여 목록의 요소에 액세스하거나 수정할 수 있습니다.
