Ionic3 UI コンポーネントでオートコンプリートを使用する方法

この記事は主にIonic3 UIコンポーネントオートコンプリートの関連情報を詳しく紹介します。興味のある友人はそれを参照してください

Web開発でもアプリ開発でも、オートコンプリートは1つです。一般的に使用されるコンポーネントの。

残念ながら、現時点では、ionic はこのコンポーネントを正式に提供していません。

ionic2-autocomplete は、GitHub 上のオープンソース Ionic2 コンポーネントです。この記事では、独自のプロジェクトでそれを使用する方法を説明します。

コンポーネントアドレス: github.com/kadoshms/ionic2-autocomplete

1) npm install ionic2-auto-complete --save

2) app.module.tsを開き、次を追加します: import { AutoCompleteModule } from 'ionic2-auto-complete';

そしてインポート配列に AutoCompleteModule を追加します

3) app.scss を開いて次を追加します: @import "../../node_modules/ionic2-auto-complete/auto-complete ";

4) ページで使用されているコンポーネントを直接検索します:

5) オートコンプリートに dataProvider を追加します: バックグラウンドからデータを取得するサービスを作成します、ionic g プロバイダー autocomplete-service、

コードは次のとおりです:

app.module.ts に追加することを忘れないでください:

import{AutocompleteServiceProvider}from'../providers/autocomplete- service/autocomplete-service ';

そして AutocompleteServiceProvider をプロバイダー配列に追加します。

7) オートコンプリート コンポーネントを使用するページ ts ファイルに、以下を追加します:

import{AutocompleteServiceProvider}from'../../providers/autocomplete-service/autocomplete-service';constructorコンストラクター内で、追加: publicautocompleteSer:AutocompleteServiceProvider

8) ion-auto-complete が使用された場所を次のように変更します: 9)

イオンサーブをして効果を確認してください。

以上がIonic3 UI コンポーネントでオートコンプリートを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。