角度2の複数選択ドロップダウン

Question

angle2-multiselect-dropdownにカスタマイズCSSを追加する必要があります。私はこのリンクを参照しました：https://www.npmjs.com/package/angular2-multiselect-dropdown。私はここに私のコードを追加しました。この問題を解決するために私を助けてください。前もって感謝します。

リンクでコード化されたものと同じものをコード化しました。しかし、私にとってはうまくいかない。 HTMLページ：

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"> 
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)"> 

CSSファイルを追加する必要があります。

.inputField { 
border: 0; 
outline: 0; 
background: transparent; 
border-bottom: 1px solid #7C7C81; 
width: 100%; 
margin-bottom: 10px; 
} 
.inputField .c-token{ 
background: #38d574 !important; 
} 
.inputField .pure-checkbox label::before { 
border-color: #38d574 !important; 
} 
.inputField .pure-checkbox input[type="checkbox"]:checked + 
label[_ngcontent-c1]:before { 
background: #38d574 !important; 
} 

.inputField .c-btn { 
border: 0 !important; 
outline: 0 !important; 
background: transparent !important; 
border-bottom: 1px solid #7C7C81 !important; 
width: 100% !important; 
margin-bottom: 10px !important; 
} 

.TSファイル：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
selector: 'dropdown', 
templateUrl: './dropdown.component.html', 
styleUrls: ['./dropdown.component.css'] 
}) 
export class DropdownComponent implements OnInit { 

itemList = []; 
selectedItems = []; 
settings = {}; 

constructor() { } 

ngOnInit() { 

this.itemList = [ 
{ "id": 1, "itemName": "India" }, 
    { "id": 2, "itemName": "Singapore" }, 
    { "id": 3, "itemName": "Australia" }, 
    { "id": 4, "itemName": "Canada" }, 
    { "id": 5, "itemName": "South Korea" }, 
    { "id": 6, "itemName": "Brazil" } 
]; 

this.settings = { 
    text: "Select Countries", 
    selectAllText: 'Select All', 
    unSelectAllText: 'UnSelect All', 
    classes: "myclass inputField" 
}; 
} 
onItemSelect(item: any) { 
console.log(item); 
console.log(this.selectedItems); 
} 
OnItemDeSelect(item: any) { 
console.log(item); 
console.log(this.selectedItems); 
} 
onSelectAll(items: any) { 
console.log(items); 
} 
onDeSelectAll(items: any) { 
console.log(items); 
} 

} 

Answer 1

あなたはこの角度成分のためにカスタムクラスを使用する必要があり、あなたは正しい方向に進んでいます:)

あなたのスタイルに問題があります。あなたのスタイルは次のようになりますので、設定で定義されたカスタムクラスは、angular2-複数選択コンポーネントに追加されます：あなたがしたい場合はhttps://cuppalabs.github.io/angular2-multiselect-dropdown/#/styling

：

.inputField { 
    color: #ccc; 
} 
.inputField .c-token{ 
    background: #38d574 !important; 
} 
.inputField .pure-checkbox label::before { 
    border-color: #38d574 !important; 
} 
.inputField .pure-checkbox input[type="checkbox"]:checked + 
label[_ngcontent-c1]:before { 
    background: #38d574 !important; 
} 

これは、ドキュメントからの例です、あなたはここでこれを見ることができます入力スタイルを変更するには、このコードをscssファイルに書き込みます。

.inputField .c-btn { 
    border: 0; 
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid #7C7C81; 
    width: 100%; 
    margin-bottom: 10px; 
} 

HTMLビューに直接インポートされたグローバルな「app.css」ファイルにスタイルを追加する必要があります。 styleUrlsを使用してコンポーネントにスタイルをアタッチする場合は、Angular2の階層スタイルを理解し、/deep/を使用する必要があります。あなたのコンポーネントにスタイルを添付したいのであれば、スタイルは持っている必要があります：すべてのコンポーネントを無効にするホスト/深い/セレクタは、あなたのDropdownComponentで含まれています

:host /deep/ .inputField .c-btn { 
    border: 0; 
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid #7C7C81; 
    width: 100%; 
    margin-bottom: 10px; 
} 

素早くチェックできるコンポーネントでこのコードを使用します。

styles: [' 
    :host /deep/ .inputField .c-btn { 
     border: 0; 
     outline: 0; 
     background: transparent; 
     border-bottom: 1px solid #7C7C81; 
     width: 100%; 
     margin-bottom: 10px; 
    } 
'] 

代わり

styleUrls: ['./dropdown.component.css'] 

あなたはここで読むことができた角度で階層コンポーネントのスタイルについての詳細：https://v2.angular.io/docs/ts/latest/guide/component-styles.html

を