Angular2 Dart - ngFor

Angular2 Dartにおけるfor文

今回はfor文です。リスト表示などの時に必須になる機能ですね。
*ngForを使って実現します。

今回のソースはこちらです。

単純なリスト表示

app.dart

@Component(selector: 'app', templateUrl: 'app.html')
class App {
  final List<Language> languages = [new Language(1,"Dart"),
                                    new Language(2,"Java"),
                                    new Language(3,"Ruby"),
                                    new Language(4,"Scala"),
                                    new Language(5,"Groovy")];
}

class Language {
  num id;
  String name;
  Language(this.id,this.name);
}

上記のようなlanguagesというListを表示させるためのHTML部分は下記になります。

app.html

<div *ngFor="let lang of languages">
    {{lang.id}}:<span style="font-weight: bold;">{{lang.name}}</span>
</div>

letという変数宣言が必要になります。これはTypeScriptベースで書かれていた影響でしょうね。今後のDart版ではこのあたりの記述が変わる可能性が高そうです。そして
let [各要素の変数名] of [リスト]という書き方になります。ちなみにngForでループ可能な条件はIterableインターフェースを実装しているかどうかになります。

メソッドを呼び出してリストを取得

フィールド指定だけでなくメソッドを呼び出してリストを取得してループさせることも可能です。

app.dart

@Component(selector: 'app', templateUrl: 'app.html')
class App {
  final List<Language> languages = [new Language(1,"Dart"),
  new Language(2,"Java"),
  new Language(3,"Ruby"),
  new Language(4,"Scala"),
  new Language(5,"Groovy")];

  List<Language> simpleMethodCall() => languages;

  List<Language> filter(String str) => languages.where((e)=> e.name.contains(str)).toList();
}

app.html

<h3>Angular2 Dart *ngFor メソッド呼び出し</h3>
<div *ngFor="let lang of simpleMethodCall()">
    {{lang.id}}:<span style="font-weight: bold;">{{lang.name}}</span>
</div>
<h3>Angular2 Dart *ngFor メソッド呼び出し（引数）</h3>
<div *ngFor="let lang of filter('a')">
    {{lang.id}}:<span style="font-weight: bold;">{{lang.name}}</span>
</div>

ngForにて用意されている便利な変数

画面の繰り返し表示にてよく必要になる変数がngForには用意されています。

変数名	型	内容
index	num	要素の順番（0始まり）
first	bool	最初の要素かどうか
last	bool	最後の要素かどうか
even	bool	要素の順番が偶数かどうか
odd	bool	要素の順番が奇数かどうか

app.html

<h3>Angular2 Dart *ngFor いろんな変数</h3>
<div *ngFor="let lang of languages; let i=index; let f=first; let l=last; let e=even; let o=odd">
    {{lang.id}}:<span style="font-weight: bold;">{{lang.name}};index={{i}};first={{f}};last={{l}};even={{e}};odd={{o}}</span>
</div>

ngForの後に変数宣言が必要になります。この宣言をしない状態で{{index}}とかいきなり記述してもエラーになります。
あと、evenとoddはindexの値を基準にしているので要素の最初ではevenはtrueになります（indexが0なので）

とりあえず今回はこの辺で。