ionicを試す １４日目 双方向バインディングは万能ではない
前回まで良い感じで問題解決出来てきた感じがします。
解決していない問題点
---------------------------------------------------------------
１．解決
２．解決
３．生地が複数選べるのはおかしい。ソースも一つのみ選択にしたい
４．メニューは並び順になっているのにオーダーの順番がバラバラ
５．オーダー側のチェックを外すとオーダーからアイテムが削除され、メニューのチェックも外したい
６．出来れば生地やソース、トッピングなどのカテゴリー別に並べたい
---------------------------------------------------------------
まず３．の問題に取り掛かります。
考え方としては、
Order配列に加える直前に、選んだアイテムのcategory_idが"00"あるいは"01"の場合、Order配列内に、そのcategory_idのアイテムがあるかを調べ、あれば追加しないという事になるかと思います。
---------------------------------------------------------------
//ただし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){
return;
}
}
---------------------------------------------------------------
このコードは、それなりに上手く動きますが、以下の問題点を抱えています。
・二つ目の生地あるいはソースは選べないが、チェックボックスのチェックがついたまま
とりあえず、return;で関数を抜ける前に、Menu[index].isChecked=false;としてみましたが効果はありません。
おかしいと思いつつ、Menu[index+1].isChecked=true;とすると、こちらは効果がある。
（あるいはMenu[index-1].isChecked=true;でも効果あり)
これをきっかけに色々試してみたのですが、少なくとも再帰的なデータ変更などトリッキーなコードを使うのは十分に理解した上でないとトラブルのもとになると思いました。
間違いなくAngularは巧妙に作られていると思いますが、その中身はブラックボックスに近いと思います。
少なくとも私レベルのユーザーは理解の範囲内で使うべきかなと思いました。
(勉強する価値は間違いなくあると思います)
という事で課題自体をもう一度見直してみました。
・配列のisCheckedはそもそも不要
(オーダー配列にコピーがあるかどうかだけが問題）
・表示に*ngForを使うメリットはあるが双方向バインディングである必要はない
(isChecked以外使っていないわけだし)
それに従い、ソースコードを見直してみました。
(それでも使える部分は多いですが)
内容的には、オーダー配列とメニュー配列のチェックボックスにIDを割り振り、その状態を見て処理を行っています。IDの記載の仕方は、『 [id]="'chkOrder' + index"』と言う書き方で固定文字列'chkOrder'に数字であるindexを付加しました。
(前回までは各配列の’isChecked’の値を見ていた)
※重要な情報です------------------------------------------
IDによりHTMLエレメントを探すのですが、
let el = document.getElementById('chkMenu'+index);
ではうまく行かないと思います。
as HTMLInputElement;
を付けて入力のエレメントと解釈を手伝う事で
el.checked
という使い方が出来ました。
-----------------------------------------------------------
また入力を拾うイベントはオーダーは"mousedown"、メニューは"click"になっています。
メニューの方は、テーブルの幅が広がった時に"mousedown"だとタイミングが外れ、結果的に外れるべきでないチェックが外れたためです。
(この辺も動的にサイズ変更する表自体に問題がある訳ですが)
生地、ソースについても2種類目を選択しようとするとダイアログで警告が表示され、入力自体無かった事にしています。
３．と５．についてはこれで解決ですが、自分の理解が明らかに足りていない手法は避けるというのもプログラミングテクニックでは無いかと思います。
次回は、並べ替えとグルーピングに挑戦します。
