웹사이트 검색

ngFor Angular 지시문을 사용하는 방법

이 강력한 지시문에 대해 알아야 할 모든 내용과 이를 통해 시퀀스 작업을 훨씬 쉽게 만드는 방법을 알아보세요.

Angular는 지시어를 사용하여 웹 사이트의 특정 HTML 요소를 동적으로 렌더링합니다. 사용할 수 있는 구조적 지시문 중 하나는 ngFor입니다.

ngFor 지시문을 사용하면 동일한 블록을 지정된 횟수만큼 반복하거나 객체 배열을 반복하여 세부 정보를 표시할 수 있습니다. 이는 다른 개체 내의 개체를 렌더링하는 데에도 사용할 수 있는 강력한 도구입니다.

또한 특정 시나리오에서 유용할 수 있는 많은 기능이 있습니다. 여기에는 첫 번째와 마지막 요소 찾기 또는 특정 항목 건너뛰기가 포함됩니다.

ngFor를 사용하여 정적 숫자를 반복하는 방법

ngFor 지시문은 JavaScript가 지원하는 많은 유용한 루프 중 하나인 for 루프를 기반으로 합니다. Angular(14)의 현재 버전에서는 반복하려는 항목 수를 포함하는 배열을 생성해야 합니다.

  1. ngFor 문 자체 내에서 목록을 만들 수 있습니다. 다음 코드는 인덱스 0~4를 사용하여 단락을 5번 반복합니다.

    <div *ngFor='let item of [0, 1, 2, 3, 4]; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
</div>

  2. 위의 방법은 대규모 배열에는 적합하지 않을 수 있으므로 TypeScript 파일에서 동적으로 배열을 만들 수도 있습니다.

    export class ExampleClass implements OnInit {
  numbers: Array<number> = [];
  constructor() {
    // This will dynamically create the following array:
    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    this.numbers = Array(10).fill(1).map((x,i)=>i);
  }
}

  3. 그런 다음 HTML의 숫자 배열을 반복할 수 있습니다.

    <div *ngFor='let item of numbers; let i = index'>
    <p>This is a repeated paragraph: {{item}}</p>
</div>

특정 숫자를 건너뛰거나 스타일을 지정하는 방법

홀수 또는 짝수 ngFor 변수를 사용하여 모든 초 숫자를 확인할 수 있습니다. 이 기능이 유용할 수 있는 시나리오는 다른 색상을 사용하여 테이블의 모든 홀수 또는 짝수 행의 스타일을 지정하려는 경우입니다.

  1. 구성 요소의 CSS 파일에 몇 가지 새로운 CSS 클래스를 추가합니다. 짝수 또는 홀수 인덱스의 특정 요소에 사용할 스타일은 다음과 같습니다.

    .red {
  color: red;
}
.blue { 
 color: blue; 
}

  2. ngFor 문 내에서 홀수 및 짝수 변수를 선언합니다. 이는 Angular가 인식하는 변수입니다. 빨간색 CSS 클래스를 짝수에 할당하고 파란색 CSS 클래스를 홀수에 할당합니다.

    <div *ngFor='let item of numbers; let odd = odd; let even = even' [ngClass]="{red: even, blue: odd}">
    <p> This is a repeated paragraph: {{item}} </p>
</div>

  3. ng Serve를 사용하여 Angular 웹사이트를 실행하고 웹 브라우저에서 엽니다. 짝수 및 홀수 HTML 요소는 CSS 클래스에 따라 서로 다른 스타일을 번갈아 사용합니다.

  4. 모든 짝수를 완전히 건너뛰려면 ngIf 지시어를 사용할 수 있습니다. 이렇게 하면 모든 홀수를 건너뛰고 짝수인 숫자만 표시됩니다.

    <div *ngFor='let item of numbers; let even = even'>
    <p *ngIf='even'> This is a repeated paragraph: {{item}} </p>
</div>

거꾸로 계산하는 방법

뒤로 계산하려면 목록을 뒤집거나 인덱스를 사용하여 루프를 통해 뒤로 계산하는 등의 전통적인 방법을 사용할 수 있습니다.

  1. ngFor 문에서 인덱스 변수를 선언합니다. ngFor 내에서 배열 길이부터 시작하여 이미 반복한 항목 수를 뺍니다.

    <div *ngFor="let item of numbers; let i = index;">
    <p> This is a repeated paragraph: {{numbers.length-i-1}} </p>
  </div>

  2. TypeScript 파일에서 역방향 목록을 만들 수도 있습니다.

    export class ExampleClass implements OnInit {
  numbers: Array<number> = [];
  reversedList: Array<number> = [];
  constructor() {
    this.numbers = Array(10).fill(1).map((x,i)=>i);
    this.reversedList = this.numbers.slice().reverse();
  }
}

  3. ngFor를 사용하여 역방향 목록을 반복합니다.

    <div *ngFor='let item of reversedList; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
</div>

첫 번째 요소와 마지막 요소의 스타일을 다르게 지정하는 방법

첫 번째 및 마지막 각도 변수를 사용하여 다른 요소와 별도로 첫 번째 요소와 마지막 요소의 스타일을 지정할 수 있습니다. 이는 :first-child와 같은 CSS 의사 클래스를 사용하는 대신 사용할 수 있습니다.

  1. ngFor 문에서 첫 번째 변수와 마지막 변수를 선언합니다. 이전 단계에서 ngClass 지시문을 사용하여 파란색 및 빨간색 CSS 클래스를 할당합니다. 파란색 CSS 클래스를 첫 번째 요소에 할당하고 빨간색 CSS 클래스를 마지막 요소에 할당합니다.

    <div *ngFor='let item of numbers; let first = first; let last = last' [ngClass]= "{blue: first, red: last}"> 
    <p> This is a repeated paragraph: {{item}} </p> 
</div>

ngFor를 사용하여 객체를 반복하는 방법

ngFor 지시문을 사용하여 객체를 반복하고 개별 변수에 액세스할 수 있습니다.

  1. TypeScript 파일에 개체 목록을 만듭니다. 이 경우 세부 정보가 포함된 사람 목록이 표시됩니다.

    export class ExampleClass implements OnInit {
  people = []; 
  constructor() {
    this.people = [
      { firstName: 'John', lastName: 'Smith', occupation: 'HR Manager', startDate: new Date("2019-02-05") },
      { firstName: 'Mary', lastName: 'Johnson', occupation: 'Technical Officer', startDate: new Date("2016-01-07") },
      { firstName: 'William', lastName: 'Brown', occupation: 'HR Officer', startDate: new Date("2018-03-03") },
    ];
  }
}

  2. HTML에서 ngFor 루프를 사용하여 사람 목록을 반복합니다. 각 사람은 person 변수를 사용하여 액세스할 수 있습니다. person 변수를 사용하여 각 개인의 속성에 액세스할 수 있습니다.

    <div *ngFor='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <p> {{person.occupation}} </p>
    <p> {{person.startDate}} </p>
</div>

중첩된 ngFor를 사용하여 다른 객체 내부의 객체를 표시하는 방법

중첩된 for 루프를 사용하여 다른 개체 안에 개체를 표시할 수 있습니다.

  1. 사람 목록을 수정합니다. 각 사람은 비상 연락처 목록을 갖게 됩니다. 각 비상 연락처를 별도의 개체로 저장합니다.

    this.people = [
      {
        firstName: 'John',
        lastName: 'Smith',
        emergencyContacts: [
          { name: 'Amanda Smith', relationship: 'Wife', phone: '0441239876' },
          { name: 'Barry Smith', relationship: 'Son', phone: '0442239876'}
        ]
      },
      {
        firstName: 'Mary',
        lastName: 'Johnson',
        emergencyContacts: [
          { name: 'Mark Johnson', relationship: 'Husband', phone: '0443239876' }
        ]
      },
 ];

  2. HTML에서 원래 루프 내에 중첩 루프를 만들어 각 비상 연락처를 반복하고 세부 정보를 표시합니다.

    <div *ngFor='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <div *ngFor='let contact of person.emergencyContacts; let j = index'>
      <h5> Emergency Contacts: </h5>
      <p> {{contact.name}} </p>
      <p> {{person.relationship}} </p>
      <p> {{person.phone}} </p>
    </div>
    
  </div>

Angular에서 ngFor를 사용한 반복

ngFor 구조 지시문을 사용하여 웹 사이트의 HTML 요소를 동적으로 반복할 수 있습니다. 이를 통해 여러 개체에 대해 또는 지정된 횟수만큼 동일한 블록을 반복할 수 있습니다.

짝수 또는 홀수를 모두 건너뛰거나 첫 번째 요소와 마지막 요소의 스타일을 지정하는 등의 다른 트릭을 수행하는 데에도 사용할 수 있습니다. 또한 이를 사용하여 다른 개체 내의 많은 개체를 동적으로 렌더링할 수도 있습니다.

웹사이트를 더욱 동적으로 만드는 데 사용할 수 있는 다른 Angular 지시문이 있습니다. 여기에는 ngIf, ngSwitch, ngStyle, ngClass 및 ngModel이 포함됩니다.

관련기사: