質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

0回答

424閲覧

Ionic4の<ion-select>の変更が画面に反映されない

yu-tank

総合スコア4

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2019/12/06 05:34

編集2022/01/12 10:55

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問