角度1.6のチップオートコンプリート。角材料なし

Question

私たちのAngular 1.6アプリケーションにオートコンプリートチップコンポーネントを追加する必要があります。我々はTypescript,Webpack 2を使用しています。すでにangular-ui-bootstrapを使用しているため、スタイルの競合を避けるために角度素材も導入したくありません。しかし、望む結果はまさに材料チップが提供するものです。

私のケースで使用できる指令またはコンポーネントはありますか？ this libraryが見つかりましたが、インポートすると無限の例外が発生します。

残念ながら、私はブートストラップ・タイプヘッドで部分的な解決策しか見つけることができませんでしたが、すべての「チップ」部分を実装する必要があり、ホイールを再発明することを考えさせてしまいました。

Answer 1

スタックNewbはこちらです。私はあなたと同じ問題を抱えています。ここで私はこれを解決する方法は次のとおりです。

1.解決アンギュラチップライブラリ内ReferenceError: error is not defined

あなたは（角-チップ）を使用するライブラリを念頭に置いてtypescriptですして設計されていません。したがって、まず、次のエラーReferenceError: error is not definedを解決する必要があります。これは、上記の行でvar error;と定義してください。これはあなたのウェブパック使用のための角チップを準備する必要があります。

2番目の問題は、typeahead-template-urlをwebpackに追加する方法です。別のhtmlファイルを参照するのではなく、Bootstrap-UI Typeahead display more than one property in results list?のようにインラインテンプレートを使用します。

あなたは私のような怠け者だと一例としてこれを使用し、そのハイパーリンクに従うことをしたくない場合は、次の<chips>タグの前に追加する

2.テンプレート：

<script type="text/ng-template" id="yourTemplate.html"> 
    <a tabindex="-1"> 
     <i ng-class="'icon-'+match.model.type"></i> 
     <span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span> 
    </a> 
</scrip> 

以下のように働いた

typeahead-template-url:"yourTemplate.html" 

：3.あなたのディレクティブでテンプレートを含めます私の魅力