ionicを試す １３日目のソース
よく使う3つのファイルのソースコードです。
インデントを全角スペースに変換していますので、半角スペース2つに変換してお使いください。
場所は、"プロジェクトフォルダ\src\app\home"です。
home.page.html
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<table class="table" border="1">
<tr>
<th>取消</th>
<th>オーダー</th>
<th>注文</th>
<th>メニュー</th>
</tr>
<tr *ngFor="let entry of Menu; index as index">
<td><ion-checkbox *ngIf="Order.length > index" [(ngModel)]="Order[index].isChecked"></ion-checkbox></td>
<td><span *ngIf="Order.length > index">{{Order[index].val}}</span></td>
<td><ion-checkbox [id]="'chk' + entry.category_id + entry.sub_id" [(ngModel)]="entry.isChecked" (ngModelChange)="fnChangeMenuCheck(index)"></ion-checkbox></td>
<td>{{entry.val}}</td>
</tr>
</table>
Order配列の要素数：{{Order.length}}
</div>
</ion-content>
---------------------------------------------------------------
home.page.ts
---------------------------------------------------------------
import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
//メニュー配列
public Menu = [
{ val: 'ナポリ風', category_id: '00', category_name: '生地', sub_id: '01', isChecked: false },
{ val: 'クリスピー', category_id: '00', category_name: '生地', sub_id: '02', isChecked: false },
{ val: 'アメリカン', category_id: '00', category_name: '生地', sub_id: '03', isChecked: false },
{ val: 'トマトソース', category_id: '01', category_name: 'ソース', sub_id: '01', isChecked: false },
{ val: 'ホワイトソース', category_id: '01', category_name: 'ソース', sub_id: '02', isChecked: false },
{ val: 'バジルソース', category_id: '01', category_name: 'ソース', sub_id: '03', isChecked: false },
{ val: 'ソースレス', category_id: '01', category_name: 'ソース', sub_id: '04', isChecked: false },
{ val: 'ペパロニ', category_id: '02', category_name: 'トッピング', sub_id: '001', isChecked: false },
{ val: 'オニオン', category_id: '02', category_name: 'トッピング', sub_id: '002', isChecked: false },
{ val: 'トマト', category_id: '02', category_name: 'トッピング', sub_id: '003', isChecked: false },
{ val: '照り焼きチキン', category_id: '02', category_name: 'トッピング', sub_id: '004', isChecked: false },
{ val: 'ダブルチーズ', category_id: '02', category_name: 'トッピング', sub_id: '005', isChecked: false },
{ val: 'コーラ', category_id: '03', category_name: 'サイドメニュー', sub_id: '001', isChecked: false },
{ val: 'ウーロン茶', category_id: '03', category_name: 'サイドメニュー', sub_id: '002', isChecked: false },
{ val: 'サラダ', category_id: '03', category_name: 'サイドメニュー', sub_id: '003', isChecked: false },
{ val: 'ポテト', category_id: '03', category_name: 'サイドメニュー', sub_id: '004', isChecked: false },
{ val: 'アイス', category_id: '03', category_name: 'サイドメニュー', sub_id: '005', isChecked: false }
];
//オーダー配列(初期状態は空)
public Order = [
];
fnChangeMenuCheck(index:number){
//該当する要素を文字列化して
let strObj = JSON.stringify(this.Menu[index]);
//その文字列から新規にオブジェクトtmpObjを作成
let tmpObj = JSON.parse(strObj);
//tmpObjのcategory_idとsub_idの組み合わせが、Order配列に存在するかを調べる。
const intExistIndex = this.Order.findIndex((u) => (u.category_id + u.sub_id)=== (tmpObj.category_id + tmpObj.sub_id));
if(this.Menu[index].isChecked){
//チェックがついていて、そのアイテムがOrder配列に無ければ追加する
if(intExistIndex == -1){
//そのオブジェクトをOrder配列の末尾に追加
this.Order.push(tmpObj);
}
}else{
//チェックが外され、そのアイテムがOrder配列にあれば削除
if(intExistIndex != -1){
this.Order.splice(intExistIndex,1);
}
}
}
}
---------------------------------------------------------------
home.page.scss
---------------------------------------------------------------
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 2o0px;
line-height: 1.5;
color: black;
margin: 0;
}
#container a {
text-decoration: none;
}
---------------------------------------------------------------
