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 루프를 사용하여 배열 요소를 반복하는 방법을 배웠습니다. , 개체 또는 템플릿 파일의 목록을 포함하고 웹 응용 프로그램 또는 웹 사이트의 프런트엔드에 데이터를 표시합니다.