Ionicでモバイルアプリを作ろう！(8)表示切り替え(ngIf)/リスト表示(ngFor)

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonic2の使い方を紹介していきます。

今回はリスト表示や、表示・非表示の切り替えといったアプリを作る上では欠かせない表現の
実装方法について解説したいと思います。

Ionic2はJSフレームワークAngular2をベースに構築されているフレームワークなので当然ですがAngular2が用意してくれている仕組みを使えます。
その中でもStructural Directiveという仕組みを使うことで目的が達成できます。
ここは少し順を追って説明していきます。

Directive

まずはDirectiveというものについておさえます。
AngularフレームワークにはDirective（ディレクティブ）という仕組みがあります。
Directiveは馴染みづらい言葉ですが、DOMに影響を与えるものというイメージをつかめれば良いです。

Directiveには以下の3種があります。

Component
Attribute Directive
Structural Directive

テンプレートを用いて生成されたディレクティブをComponentと呼びます。
IonicにおけるPageなどがここに含まれます。

Attribute DirectiveはHTML要素の見た目や振る舞いを定義するディレクティブです。
ここでは詳しく触れませんがNgStyleなどがこれに当たります。

そしてStructural directiveはDOM要素の追加や削除を行いDOM構造を変化させるためのディレクティブです。
今回の本題であるngIfやngForがこれに含まれます。

表示・非表示の切り替え *ngIf

要素の表示・非表示を切り替える際に使うディレクティブがngIfです。
ngIfは値としてbooleanをとり、trueならば表示、falseなら非表示にします。

次の例のようにして使います。

home.ts@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  user = {
    name: "Alice",
    age: 21
  }
//...
}

home.ts
1 2 3 4 5 6 7 8 9 10 11	`@Component({` `selector:` `'page-home',` `templateUrl:` `'home.html'` `})` `export` `class` `HomePage {` `user = {` `name:` `"Alice",` `age: 21` `}` `//...` `}`

home.html<p *ngIf="user.age < 20">{{user.name}}は未成年です。</p>
<p *ngIf="user.age >= 20">{{user.name}}は成人です。</p>

home.html
1 2	`<p` `ngIf="user.age < 20">{{user.name}}は未成年です。</p>` `<p` `ngIf="user.age >= 20">{{user.name}}は成人です。</p>`

こうすることで条件に合わせて表示を切り替えることができます。

リスト表示 *ngFor

リストやテーブルといった繰り返しにより成る要素を表示したい時に使うのディレクティブがngForです。
次の例のようにして使います。

home.ts//...
export class HomePage {
  users = [
    "Alice",
    "Bob",
    "Chan",
    "David",
    "Elen"
  ]
 
  constructor(public navCtrl: NavController) {
  }
}

home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13	`//...` `export` `class` `HomePage {` `users = [` `"Alice",` `"Bob",` `"Chan",` `"David",` `"Elen"` `]` `constructor(public navCtrl: NavController) {` `}` `}`

home.html<ion-list>
  <div *ngFor="let user of users">
    {{user}}
  </div>
</ion-list>

home.html
1 2 3 4 5	`<ion-list>` `<div` `*ngFor="let user of users">` `{{user}}` `</div>` `</ion-list>`

今回は文字列配列を例にしましたが、配列プロパティ(users)はもちろん任意のオブジェクトの配列でも構いません。
ちなみに、ion-listはIonic2フレームワークで定義してくれているコンポーネントです。
Ionicを使っていてリスト表示する場合はこの要素で囲ってあげるのが良いです。
各プラットフォームに合わせたViewをよしなに出力してくれます。