ionicを試す １７日目のソースコード
ionic infoによる開発環境の情報の表示です。
PS C:\MyTest\test000> ionic info
Ionic:
Ionic CLI : 6.19.0 (C:\Users\mytes\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.1
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v16.14.2 (C:\Program Files\nodejs\node.exe)
npm : 8.5.0
OS : Windows 10
よく使う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 MenuCopy; index as index; first as first; ">
<td *ngIf="entry.category_id==''" colspan="4">{{entry.category_name}}</td>
<td *ngIf="entry.category_id!=''"><ion-checkbox [id]="'chkOrder' + index" *ngIf="ForTable[index]!=''" (mousedown)="fnChangeOrderCheck(index, $event)"></ion-checkbox></td>
<td *ngIf="entry.category_id!=''">{{ForTable[index]}}</td>
<td *ngIf="entry.category_id!=''"><ion-checkbox [id]="'chkMenu' + index" (click)="fnChangeMenuCheck(index)"></ion-checkbox></td>
<td *ngIf="entry.category_id!=''">{{entry.val}}</td>
</tr>
</table>
Order配列の要素数：{{Order.length}}、
MenuCopy{{Menu.length}}、
MenuCopy{{MenuCopy.length}}
<br />
<span *ngIf=true>*ngIf表示される</span><br />
<span *ngIf=false>*ngIf表示されない</span><br />
<span [hidden]=true>[hidden]表示されない</span><br />
<span [hidden]=false>[hidden]表示される</span>
</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 Menu = [
{ val: 'ナポリ風', category_id: '00', category_name: '生地', sub_id: '01' },
{ val: 'クリスピー', category_id: '00', category_name: '生地', sub_id: '02' },
{ val: 'アメリカン', category_id: '00', category_name: '生地', sub_id: '03' },
{ val: 'トマトソース', category_id: '01', category_name: 'ソース', sub_id: '01' },
{ val: 'ホワイトソース', category_id: '01', category_name: 'ソース', sub_id: '02' },
{ val: 'バジルソース', category_id: '01', category_name: 'ソース', sub_id: '03' },
{ val: 'ソースレス', category_id: '01', category_name: 'ソース', sub_id: '04' },
{ val: 'ペパロニ', category_id: '02', category_name: 'トッピング', sub_id: '001' },
{ val: 'オニオン', category_id: '02', category_name: 'トッピング', sub_id: '002' },
{ val: 'トマト', category_id: '02', category_name: 'トッピング', sub_id: '003' },
{ val: '照り焼きチキン', category_id: '02', category_name: 'トッピング', sub_id: '004' },
{ val: 'ダブルチーズ', category_id: '02', category_name: 'トッピング', sub_id: '005' },
{ val: 'コーラ', category_id: '03', category_name: 'サイドメニュー', sub_id: '001' },
{ val: 'ウーロン茶', category_id: '03', category_name: 'サイドメニュー', sub_id: '002' },
{ val: 'サラダ', category_id: '03', category_name: 'サイドメニュー', sub_id: '003' },
{ val: 'ポテト', category_id: '03', category_name: 'サイドメニュー', sub_id: '004' },
{ val: 'アイス', category_id: '03', category_name: 'サイドメニュー', sub_id: '005' }
];
//オーダー配列(初期状態は空)
public Order = [
];
//表示用配列
ForTable = [];
//表示用index配列(注文取消時にオーダー配列へアクセスするために必要）
ForTableIndex = [];
//メニューコピー配列
//前回までMenu配列を使用していたところは、MenuCopy配列に変更する
MenuCopy = JSON.parse(JSON.stringify(this.Menu));
//コンストラクター
constructor(){
//MenuCopyにカテゴリー名を表示させるためだけの行を追加
let PreviousCategoryName = this.MenuCopy[this.MenuCopy.length-1].category_name;
for(let i=this.MenuCopy.length;i>0;i--){ //行を追加させるので逆順でループ
if(this.MenuCopy[i-1].category_name != PreviousCategoryName){
this.MenuCopy.splice(i,0,{val: '', category_id: '', category_name: PreviousCategoryName, sub_id: ''});
PreviousCategoryName = this.MenuCopy[i-2].category_name;
}
}
//最初のカテゴリーはループ外で追加
this.MenuCopy.splice(0,0,{val: '', category_id: '', category_name: PreviousCategoryName, sub_id: ''});
//表示用配列と表示用index配列の初期化
this.fnInitForTable();
}
//表示用配列作成・初期化
fnInitForTable(){
//配列長をメニュー配列と揃える。
this.ForTable.length = this.MenuCopy.length;
this.ForTableIndex.length = this.MenuCopy.length;
//""および-1で埋める
this.ForTable.fill("");
this.ForTableIndex.fill(-1);
}
//表示用配列変更(オーダー配列はソート済みであること)
fnChangeDisplaeyArray(){
//表示用配列初期化
this.fnInitForTable();
//配列をグループ化するための関数定義
const groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
//オーダー配列をカテゴリーIDでグルーピング
const OrderGroupBy = groupBy(this.Order, 'category_id');
//表示用配列に現在までセットした数
let cntSet = 0;
for(let i=0; i<Object.keys(OrderGroupBy).length;i++){
//オーダー配列のカテゴリーと同じカテゴリーを持つメニュー配列のインデックスを求める
let tmpObj = OrderGroupBy[Object.keys(OrderGroupBy)[i]];
let intExistIndex = this.MenuCopy.findIndex((u) => u.category_id === Object.keys(OrderGroupBy)[i]);
for(let j=0; j<tmpObj.length;j++){ //tmpObjは複数のアイテムを持つ可能性があるex.トマト、ダブルチーズなどなど
this.ForTable[intExistIndex + j]=tmpObj[j].val;
//オーダー配列のインデックスを退避
this.ForTableIndex[intExistIndex + j]=cntSet;
cntSet++;
}
}
}
//メニュー配列チェック
fnChangeMenuCheck(index:number){
//該当する要素を文字列化して
let strObj = JSON.stringify(this.MenuCopy[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));
let el = document.getElementById('chkMenu'+index) as HTMLInputElement;
//この時点ではチェックボックスの変更反映していない(すなわち真偽が逆)
if(!el.checked){
//チェックがついていて、そのアイテムがOrder配列に無ければ追加する
if(intExistIndex == -1){
//ただしtmpObjのcategory_idが'00'あるいは'01'の場合は同じcategory_idのアイテムを追加してはいけない
if(tmpObj.category_id == '00' || tmpObj.category_id == '01'){
//tmpObjのcategory_idが、Order配列に存在するかを調べる。
const intExistIndex2 = this.Order.findIndex((u) => (u.category_id)=== (tmpObj.category_id));
if(intExistIndex2!=-1){
el.checked = true;
alert(this.MenuCopy[index].category_name + "は、一つしか選べません");
return;
}
}
//そのオブジェクトをOrder配列の末尾に追加
this.Order.push(tmpObj);
//配列をソート
this.Order.sort(function(a,b){
if((a.category_id+a.sub_id)<(b.category_id+b.sub_id))return -1;
if((a.category_id+a.sub_id)>(b.category_id+b.sub_id))return 1;
return 0;
});
}
}else{
//チェックが外され、そのアイテムがOrder配列にあれば削除
if(intExistIndex != -1){
this.Order.splice(intExistIndex,1);
}
}
this.fnChangeDisplaeyArray();
}
//オーダー取消
fnChangeOrderCheck(index:number, $event:Event){
//indexをオーダー配列のインデックスに変換（このindexは表示用配列のindexなので）
let OrderIndex = this.ForTableIndex[index];
//該当する要素を文字列化して
let strObj = JSON.stringify(this.Order[OrderIndex]);
//その文字列から新規にオブジェクトtmpObjを作成
let tmpObj = JSON.parse(strObj);
//tmpObjのcategory_idとsub_idの組み合わせが、MenuCopy配列に存在するかを調べる。
const intExistIndex = this.MenuCopy.findIndex((u) => (u.category_id + u.sub_id)=== (tmpObj.category_id + tmpObj.sub_id));
let elMenu = document.getElementById('chkMenu'+intExistIndex) as HTMLInputElement;
elMenu.checked = false;
this.Order.splice(OrderIndex,1);
this.fnChangeDisplaeyArray();
//チェックボックスをクリックしたので、そのままだとチェックがつく。あらかじめつけておけばチェックが外れる
let elOrder = document.getElementById('chkOrder'+(index)) as HTMLInputElement;
elOrder.checked = true;
}
}
---------------------------------------------------------------
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;
}
---------------------------------------------------------------
