在 ionic v4 with angular v7 環境使用 ion-checkbox 元件，有一些地方要注意，本文章分享我的使用經驗。如果在 ionic v4 和 angular v7 環境，想用 ion-checkbox 和 angular 的 template-driven form 方式做表單選項的勾選元件，例如顯示使用者上次勾選的檔案簽名人需要有誰，這功能的流程需要先讀入後端資料，再設定畫面上的 ion-checkbox 值，就很適合使用下面這個方法。
HTML 檔案:
<article>
<!-- ....(略) -->
</article>
<div class="container list-signers">
<span *ngFor="let signer of signers; index as idx">
<ion-checkbox [checked]="signed.toSign" (ionChange)="onIonChange($event, idx)" id="name-{{idx}}">
<label for="name-{{idx}}">{{ signer.name }}</label>
</span>
</div>
TS 檔案 :
// 資料變數宣告
signers: unknown[] = [
{
name: '大明1',
toSign: true, // 需要簽
},
{
name: '大明2',
toSign: false, // 不需要簽
},
{
name: '大明3',
toSign: true,
},
];
// ...(略)
onIonChange($event, idx) {
// 如果傳進來的已勾選值相同於項目本身的 toSign 值, 則不需修改
if ($event.target.checked === this.signers[idx].toSign) return // <- IMPORTANT
/**
* Notice: 因為教學懶得 import ChangeDetectionRef., 所以用 js 的 map()，
* 強制改變 variable 的記憶體位置，令 angular 自動更新 html 畫面。
* 好孩子不要學, 如果可以請善用 angular 生態系的機制。
*/
this.signers = this.signers.map((elem, idx1) => {
if (idx === idx1) {
// 找到相同項目，並修改它的已勾選狀態
elem.toSign = $event.target.checked
}
return elem
})
}
如果你很確定功能畫面的初始狀態，都是未勾選的 ion-checkbox，而且也想使用 Angular template-driven form 方式，那麼用以下方式會更簡單:
HTML 檔案:
<article>
<!-- ....(略) -->
</article>
<div class="container list-signers">
<span *ngFor="let signer of signers; index as idx">
<ion-checkbox [(ngModel)]="signer.toSign" [ngModelOptions]="{standalone: true}" id="name-{{idx}}">
<label for="name-{{idx}}">{{ signer.name }}</label>
</span>
</div>
TS 檔案:
// 資料變數宣告
signers: unknown[] = [
{
name: '大明1',
toSign: false, // 不需要簽
},
{
name: '大明2',
toSign: false,
},
{
name: '大明3',
toSign: false,
},
];
在 angular 的 reactive-driven form 搭配 ion-checkbox，則如一般 angular 的使用方式，只要照 angular 官方方式做就好。