ionicを試す ９日目 チェックボックスと*ngFor、そして関数
前回に引き続き、チェックボックスと*ngForについて試します。
例えば、あるチェックボックスにチェックを付けた場合、確認ダイアログを表示して、場合によっては取り消したい場合もあると思います。
あるいはチェックの付いた項目をリストとして表示(チェックが外れたらリストから除外)するようなケースもあるでしょう。
そう言った目的のために、チェックボックスの変更時に動く関数を試してみましょう。
"src\app\home\home.page.ts"のクラス定義の中に関数を記述
------------------------------------------
fnChangeCheck(){
alert('変更されました');
}
------------------------------------------
"src\app\home\home.page.html"内に関数を記述
---------------------------------------------------------------
<ion-checkbox slot="start" [(ngModel)]="entry.isChecked" (ngModelChange)="fnChangeCheck()"></ion-checkbox>
---------------------------------------------------------------
'(ngModelChange)='は、その前に記述した' [(ngModel)]="entry.isChecked"'の内容が変更すると、'='の後の記述を実行します。
この場合は"home.page.ts"で定義した関数'fnChangeCheck()'を実行して、'変更されました'と言うアラートを表示します。
単純なケースで有ればこれで充分かもしれません。
しかし多くの場合、配列(この場合は'form'）の何番目の配列が変更されたかが必要になると思います。
Angularの機能'*ngFor'にはその目的のための特殊変数が用意されています。
特殊変数名
index：ループ回数(インデックスは0から始まる事に注意)
first：最初の要素がどうか
end：最後の要素がどうか
even：index値が偶数かどうか
odd：index値が奇数かどうか
Angular ディレクティブ - Qiita の『3.ex1 ngForで使える特殊変数』参照
https://qiita.com/katahane_koko/items/c8ab12e5cc55a0355e73
ただし、これは使いたい特殊変数の名前を宣言する必要があります。
(この変数については名前の変更等は出来ませんので予約語と思ってください）
使い方の例(上記参照サイトより)
---------------------------------------------------------------
<tr *ngFor="let member of members; index as index;first as first;last as last;even as even;odd as odd">
---------------------------------------------------------------
"index as index;"とか少々書き方に違和感を感じますが、使い方によっては強力な助っ人になると思います。
*ngForの説明が長くなりましたが、チェックボックスの話に戻ります。
上の"home.page.ts"の関数"fnChangeCheck()"に引数として特殊変数の'index'を渡し、変更のされた項目名を表示させて、今回は終了にします。
"home.page.html"
------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<!-- Checkboxes in a List -->
<ion-list>
<ion-item *ngFor="let entry of form;index as index">
<ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="start" [(ngModel)]="entry.isChecked" (ngModelChange)="fnChangeCheck(index)"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</ion-content>
------------------------------------------
"home.page.ts"
------------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
public form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: true }
];
fnChangeCheck(index:number){
alert(this.form[index].val+'が変更されました');
}
}
------------------------------------------
次回も引き続きチェックボックスと*ngifの使い方の例を見て見る予定です。
