前提・実現したいこと
Ionic3からIonic4へのバージョンアップするためにマークアップを手直ししているのですが、DOMの反映がうまくいってないのか、バージョンアップ前の動作になりません。
<ion-select>のマークアップの変更がありましたが、動作に変更あったのでしょうか。
移行前の状態を維持するためご教授お願いします。
■移行前の動作
都道府県のセレクトボックスを選択すると市区町村が空欄になる。
→「大阪府、大阪市」の選択状態で、東京都を選択すると、セレクトオプションに東京の市区町村があるが、大阪市の選択状態のままになってしまう。
発生している問題・エラー
エラーメッセージはありません。
該当のソースコード
regist.page.html
<div class="form-line"> <div class="form-label">都道府県</div> <ion-select [(ngModel)]="customerForm.prefCode" interface="action-sheet" (ionChange)="setCityList()"> <ion-select-option value=""></ion-select-option> <ion-select-option *ngFor="let pref of prefList" [value]="pref.prefCode">{{pref.prefName}}</ion-select-option> </ion-select> </div> <div class="form-line"> <div class="form-label">市区町村</div> <ion-select [(ngModel)]="customerForm.cityCode" interface="action-sheet"> <ion-select-option value=""></ion-select-option> <ion-select-option *ngFor="let city of cityList" [value]="city.cityCode">{{city.cityName}}</ion-select-option> </ion-select> </div>
regist.page.ts
private prefList = []; // 都道府県のリスト private cityList = []; // 選択中の都道府県に対する市区町村のリスト private customerForm = { prefCode: '', cityCode: '' }; // 都道府県のセレクトボックスのChangeイベントで動作 public setCityList() { if (!this.customerForm.prefCode) { this.cityList = []; return false; } // 選択した都道府県に対応する市区町村をcityListにセット this.prefList.forEach((prefData) => { if (prefData.prefCode === this.customerForm.prefCode) { this.cityList = prefData.cityList; return; } }); }
試したこと
マークアップからIonicを削除しAngularのみに変更したら期待通り動作になります。
<div class="form-line"> <div class="form-label">都道府県</div> <select [(ngModel)]="customerForm.prefCode" (change)="setCityList()"> <option value=""></option> <option *ngFor="let pref of prefList" [value]="pref.prefCode">{{pref.prefName}}</option> </select> </div> <div class="form-line"> <div class="form-label">市区町村</div> <select [(ngModel)]="customerForm.cityCode" > <option value=""></option> <option *ngFor="let city of cityList" [value]="city.cityCode">{{city.cityName}}</option> </select> </div>
補足情報(FW/ツールのバージョンなど)
Angular:8.2.14
Ionic:4.11.5
あなたの回答
tips
プレビュー