この章では、Angular2を使用してデータを表示する方法と、組み込みの指示NgForとNgIfを使用する方法を学びます
まず、実行できるAngular2サンプルプログラムがあることを確認してください。前の章で完了したQuickStart Smallプロジェクトまたは公式Webサイトの上の手順に従って完了したQuickStart Smallプロジェクトであることが最善です。それでは、次の幸せな旅を始めましょう。
私たちの一連の記事はTypeScriptを使用しているため、次のコンテンツを読む前に、 TypeScriptまたはES6の種類を見ることもできます。それらのURLはタイプスクリプトとES6です。以前にJavaやC ++などの同様のオブジェクト指向の言語を学んだ場合、ここでクラスを簡単に学ぶことができます。ここのクラスは、基本的にそれらの言語のクラスと似ています。
前のセクションでは、 app.component.tsで空のクラスをエクスポートしたため、満たすには充填を開始する必要があります。まず、AppComponentクラス（コンポーネント）、名前、年齢、果物に3つの属性を追加します。次のように：
export class appcomponent {username = 'dreamapple';年齢= 22; Fruit = 'Apple'}上記の執筆方法は、実際には略語の単なる形式ですが、完全な執筆方法は次のとおりです。
export class appcomponent {// username = 'dreamapple'; // age = 22; // Furt = 'Apple'ユーザー名：文字列;年齢：数;フルーツ：文字列; constructor（）{this.username = 'dreamapple'; this.age = 22; this.fruit = 'Apple'; }}次に、テンプレートでより多くのHTMLを使用する必要があるため、テンプレートを変更する必要があるため、HTMLフラグメントをラップするにはバックテックを使用する必要があります。デコレーター機能は次のとおりです。
@component（{selector： 'my-app'、テンプレート： `<p>私の名前は次のとおりです。{{username}} </p> <p>私の年齢は次のとおりです。もちろん、以下に示すように、デコレータ関数のメタデータオブジェクトのテンプレート構成オプションを使用することもできます。
@component（{selector： 'my-app'、// template： `// <p>私の名前は：{{username}} </p> // <p>私の年齢は：{{age}} <// <p>私の好きなフルーツは{{{fruct}}}} </p> // 'app/templates/app-template.html'}）その中で、App/Templates/App-Template.htmlは、プログラムのルートディレクトリ（Angular2-Travelではなく）の下のテンプレートフォルダーのApp-Template.htmlファイルを表し、以前に書いたHTMLフラグメントをコピーします。
上記のプロセスから、Angular2がAngular1が使用する二重ブレースを使用していることがわかります。補間シンボルとして使用され、補間シンボルが表示されるデータは表示したいデータです。次に、組み込みの命令ngforを使用することを学ぶ必要があります。 Angular1に精通している学生は、NGFORとNG-Reepeatが基本的に同じであるため、この指示を簡単に開始する必要があります。これは、通常、配列である反復可能なオブジェクトをループするために使用されます。
次に、以下に示すように、別の属性フルーツリストをAppComponentに追加します。
export class appcomponent {username = 'dreamapple';年齢= 22; fruitslist = ['apple'、 'orange'、 'pear'、 'banana']; furt = this.fruitslist [0]; // this.fruitslist [0]}を使用します私たちが注意を払う必要があるのは、コメントされた場所です。これを使用して、上記で定義した属性を参照する必要があります。フルーツリストを使用している場合、Angularはそれが何を表すかを知りません。
次に、このフルーツアレイをループして、テンプレートでそれを表現する方法を確認します。
@component（{selector： 'my-app'、テンプレート： `<p>私の名前は：{{username}} </p> <p>私の年齢は：{{age}} </p> <ul> <li *ngfor =" frutslist "> {{{Fruit}} </li is </li> {{フルーツ}} </p> `}）上記のコードには注意が必要なことがいくつかあります。まず、Ngforの代わりに *ngforを使用しました。 *ここでは削除できません。削除された場合、プログラムはエラーを報告しませんが、アレイの最初のアイテムのみをループアウトします。 *追加する必要がある理由については、ここのテンプレートの構文を詳細に見ることができます。もちろん、各インデックスを表示するのに役立つ *ngfor式の後ろにいくつかの操作を書くことができます。
<li *ngfor = "let fruitslist; let i = index;"> {{i}} - {{furt}} </li>
上記のテンプレートコードには注意すべきことがいくつかあります。まず第一に、 *ngforの後に式が続くことを知っておく必要があるため、ループを改善するためにいくつかの簡単な表現を書くことができます。また、キーワードLetを使用し、ブロックレベルのスコープを追加し、これらの変数を *ngforループブロックに制限します。わかりました、 *ngforについてもっと知りたい場合は、NGFORに関する公式APIを見ることができます。
紹介される次の指示はNGIFです。もちろん、この命令は基本的にAngular1のng-if命令に似ています。次の式の値に基づいて、DOMの要素を追加または削除するかどうかを決定します。
この指令をテンプレートで使用する方法をご覧ください。
<p *ngif = "fruitslist.length> 3"> fruitslistの長さは3 </p>よりも大きい
<p *ngif = "fruitslist.length <= 3"> fruitslistの長さは3より大きくありません</p>
まず、 *ngforを使用するように、 *ngifを使用することを指摘する必要があります。その後、 *ngifの後に式を書くことができ、この式の期待される結果はブール値です。次に、 *ngifディレクティブは、この式の値に基づいてDOMに制御する要素を追加または削除するかどうかを決定します。
TypeScriptを使用するため、クラスを使用してインスタンスを構築するなど、多くの新機能を使用できます。次に、フルーツクラスを使用して、フルーツインスタンスを構築します。最初に、アプリフォルダーの下に新しいフォルダーを作成し、Furt.tsファイルを作成し、フルーツクラスのコードを書きます。
エクスポートクラスのフルーツ{コンストラクター（公開名：文字列、公開価格：番号）{}}上記のコードを説明しましょう。コンストラクターを使用し、コンストラクター内のこのオブジェクトの2つのプロパティを宣言します。 1つは名前で、もう1つは価格です。名前：文字列と価格：コンストラクターの番号パラメーターを使用して、このオブジェクトのプロパティを作成および初期化します。次に、このクラスをプログラムで使用できます。
まず、app.component.tsでこのクラスを紹介します：
'./classes/fruits'から{fruit}をインポートします。
次に、AppComponentのフルーツクラスを使用して、フルーツリストを初期化します。
export class appcomponent {username = 'dreamapple';年齢= 22; fruitslist = [new Fruit（ 'Apple'、20）、New Fruit（ 'Orange'、30）、New Fruit（ 'pear'、40）、new Fruit（ 'banana'、50）]; // noinspection typescriptunResolvedVariable Fruit = this.fruitslist [0] .name; // this.fruitslist [0]}を使用します次に、テンプレートを変更する必要があります。
コードコピーは次のとおりです。
<li *ngfor = "let fruts of fruitslist; let i = index;"> {{i}} - {{furt.name}} - {{furt.price}} </li>
最終結果は次のとおりです。
最後に、ES6とTypeScriptの両方がJavaを書いているように感じさせると言わざるを得ません。これはプロと詐欺でもあります。利点は、コードの読みやすさを向上させ、プログラムの維持を容易にし、大規模なプロジェクトをより便利にし、チームワークを非常に便利にすることです。もちろん、主に全員の学習コストを増加させるいくつかの欠点があります。もちろん、すべてが楽しみにしています。