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() 関数を使用して、配列を 1つずつ 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 ループであり、テンプレートファイルで使用して、Web アプリケーションまたは Web サイトにデータのリストを表示できます。

広く使用されているプログラミング言語のリストを作成し、*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 ループを使用して配列の要素を反復処理する方法を学習しました。、オブジェクト、またはテンプレートファイル内のリスト、および Web アプリケーションまたは Web サイトのフロントエンドにデータを表示します。