Angular의 forEach

1. Angular에서 .forEach() 사용
2. Angular에서 *ngFor 루프 사용

예를 들어 Angular에 .forEach() 함수를 도입하고 이를 사용하여 배열 요소를 반복할 것입니다.

Angular에서 .forEach() 사용

.forEach()는 배열의 각 요소에 대한 함수를 호출하는 Angular의 함수입니다.

빈 배열에 대해서는 실행되지 않습니다. .ts 파일에서만 사용되며 Angular에서 템플릿 파일의 정보를 표시하기 위해 템플릿에서 사용할 수 없습니다.

.forEach()의 구문은 매우 간단합니다. 다음 명령을 사용하여 새 응용 프로그램을 만들어 예제부터 시작하겠습니다.

# angular
ng new my-app

Angular에서 새 응용 프로그램을 만든 후 다음 명령을 사용하여 응용 프로그램 디렉터리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

우리는 1에서 10까지의 숫자 배열을 만들 것입니다.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

.forEach() 함수를 사용하여 어레이를 하나씩 console.log해 봅시다. 그래서 우리는 또 다른 변수 num을 만들 것입니다.

# Angular
num = this.numbers.forEach(x => console.log(x));

출력:

위의 예에서 볼 수 있듯이 .forEach()를 사용하여 배열의 각 요소에 대한 함수를 호출할 수 있습니다. console.log를 사용하는 대신 이 배열에서 함수를 호출해 보겠습니다.

이 함수에서 변수 x를 배열의 요소가 될 매개변수로 사용하고 10을 추가하여 반환합니다.

# Angular
function(x){
    x = x + 10; 
    console.log(x);
  }

이제 .forEach()를 사용하여 numbers 배열의 각 요소에서 해당 함수를 호출합니다.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
num = this.numbers.forEach(x => this.function(x));

출력:

위의 예에서 볼 수 있듯이 배열의 모든 요소에 전달한 함수가 작동하고 배열의 각 요소에 10이 추가되었습니다. 그러나 템플릿 파일에서 .forEach() 함수를 사용하여 배열 요소를 반복할 수는 없습니다.

배열의 요소나 템플릿 파일의 목록을 반복하려면 *ngFor 루프를 사용할 수 있습니다.

Angular에서 *ngFor 루프 사용

*ngFor는 배열, 목록 또는 개체의 요소를 반복하는 Angular의 for 루프이며 템플릿 파일에서 웹 애플리케이션이나 웹사이트에 데이터 목록을 표시하는 데 사용할 수 있습니다.

널리 사용되는 프로그래밍 언어 목록을 만들고 *ngFor 루프를 사용하여 템플릿 파일에 해당 목록을 표시하는 예제를 살펴보겠습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

모든 종속성이 올바르게 설치되었는지 확인하기 위해 앱을 실행해 보겠습니다.

# angular
ng serve --open

우리는 language.ts라는 클래스 파일을 만들 것입니다. 여기에서 언어의 생성자를 만들 것입니다. 따라서 language.ts의 코드는 다음과 같습니다.

# angular
export class Language {
  constructor(public name: string, public version: string) {}
}

app.component.ts에서 Language를 가져옵니다.

# angular
import { Language } from './language';

우리는 프로그래밍 언어 목록을 만들 것입니다.

# angular
ProgrammingLanguages: Language[] = [
    new Language('Angular', '13.1'),
    new Language('React', '17'),
    new Language('Vue', '3.2'),
    new Language('Node', '17'),
  ];

app.component.html 템플릿에서 *ngFor 루프를 사용하여 목록을 표시합니다.

# angular
<main>
  <h2>Widely Used Programming Languages</h2>
  <section>
    <div *ngFor="let language of ProgrammingLanguages">
      <div class="list">
        <h2>{{ language.name }}</h2>
        <p>{{ language.version }}</p>
      </div>
    </div>
  </section>
</main>

app.component.css에서 출력을 깔끔하고 이해하기 쉽게 보이도록 CSS를 작성할 것입니다.

# angular
.list {
  padding: 5px;
  text-align: center;
  background-color: white;
  border: 1px solid black;
  margin-bottom: 5px;
  margin-left: 5px;
  width: 45%;
  float: left;
}

출력:

이 튜토리얼에서는 .forEach() 함수를 사용하여 typescript 파일의 배열 요소를 반복하는 방법과 *ngFor 루프를 사용하여 배열 요소를 반복하는 방법을 배웠습니다. , 개체 또는 템플릿 파일의 목록을 포함하고 웹 응용 프로그램 또는 웹 사이트의 프런트엔드에 데이터를 표시합니다.