0
我正在將我的<select>
轉換爲更具有角度2的語法。我使用的是Angular 2,但我使用的是jquery,因爲我的<select>
這是不好的做法,但它工作。現在點擊它不會發生任何事情(不會出現下拉菜單)。有沒有可能通過查看輸出html來查看爲什麼沒有發生?html選擇不可點擊
HTML:
<select _ngcontent-iwn-11="" class="form-control ng-untouched ng-pristine ng-valid" id="find-category-select" multiple="" name="categories" required="" disabled="" ng-reflect-required="" ng-reflect-name="categories" ng-reflect-model="">
<!--template bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object]"
}--><optgroup _ngcontent-iwn-11="" ng-reflect-label="grocery products" label="grocery products" style="
width: 400px;
height: 100px;
">
<!--template bindings={
"ng-reflect-ng-for-of": "meat,dairy,confectionary,dessert,baking,condiments,beverages,Dr IQ,Magma,Tornado"
}--><option _ngcontent-iwn-11="">
meat
</option><option _ngcontent-iwn-11="">
dairy
</option><option _ngcontent-iwn-11="" style="
height: 100px;
width: 400px;
">
confectionary
</option><option _ngcontent-iwn-11="">
dessert
</option><option _ngcontent-iwn-11="">
baking
</option><option _ngcontent-iwn-11="">
condiments
</option><option _ngcontent-iwn-11="">
beverages
</option><option _ngcontent-iwn-11="">
Dr IQ
</option><option _ngcontent-iwn-11="">
Magma
</option><option _ngcontent-iwn-11="">
Tornado
</option>
</optgroup><optgroup _ngcontent-iwn-11="" ng-reflect-label="meals" label="meals">
<!--template bindings={
"ng-reflect-ng-for-of": "African,American,Argentine,Asian,Asian Fusion,BBQ,Bakery,Beverages,Brazilian,Breakfast,British,Cafe,Cambodian,Chinese,Coffee and Tea,Contemporary,Continental,Deli,Desserts,Drinks Only,European,Fijian,Filipino,Finger Food,Fish and Chips,French Fusion,German,Greek,Grill,Healthy Food,Ice Cream,Indian,Indonesian,International,Irish,Italian,Japanese,Jewish,Juices,Kiwi,Korean,Latin,American,Lebanese,Malaysian,Mediterranean,Mexican,Middle Eastern,Mongolian,Moroccan,Nepalese,North Indian,Pacific,Persian,Pizza,Portuguese,Pub Food,Seafood,Singaporean,South Indian,Spanish,Sri Lankan,Steakhouse,Street Food,Sushi,Taiwanese,Thai,Turkish,Vietnamese"
}--><option _ngcontent-iwn-11="">
African
</option><option _ngcontent-iwn-11="">
American
</option><option _ngcontent-iwn-11="">
Argentine
</option><option _ngcontent-iwn-11="">
Asian
</option><option _ngcontent-iwn-11="">
Asian Fusion
</option><option _ngcontent-iwn-11="">
BBQ
</option><option _ngcontent-iwn-11="">
Bakery
</option><option _ngcontent-iwn-11="">
Beverages
</option><option _ngcontent-iwn-11="">
Brazilian
</option><option _ngcontent-iwn-11="">
Breakfast
</option><option _ngcontent-iwn-11="">
British
</option><option _ngcontent-iwn-11="">
Cafe
</option><option _ngcontent-iwn-11="">
Cambodian
</option><option _ngcontent-iwn-11="">
Chinese
</option><option _ngcontent-iwn-11="">
Coffee and Tea
</option><option _ngcontent-iwn-11="">
Contemporary
</option><option _ngcontent-iwn-11="">
Continental
</option><option _ngcontent-iwn-11="">
Deli
</option><option _ngcontent-iwn-11="">
Desserts
</option><option _ngcontent-iwn-11="">
Drinks Only
</option><option _ngcontent-iwn-11="">
European
</option><option _ngcontent-iwn-11="">
Fijian
</option><option _ngcontent-iwn-11="">
Filipino
</option><option _ngcontent-iwn-11="">
Finger Food
</option><option _ngcontent-iwn-11="">
Fish and Chips
</option><option _ngcontent-iwn-11="">
French Fusion
</option><option _ngcontent-iwn-11="">
German
</option><option _ngcontent-iwn-11="">
Greek
</option><option _ngcontent-iwn-11="">
Grill
</option><option _ngcontent-iwn-11="">
Healthy Food
</option><option _ngcontent-iwn-11="">
Ice Cream
</option><option _ngcontent-iwn-11="">
Indian
</option><option _ngcontent-iwn-11="">
Indonesian
</option><option _ngcontent-iwn-11="">
International
</option><option _ngcontent-iwn-11="">
Irish
</option><option _ngcontent-iwn-11="">
Italian
</option><option _ngcontent-iwn-11="">
Japanese
</option><option _ngcontent-iwn-11="">
Jewish
</option><option _ngcontent-iwn-11="">
Juices
</option><option _ngcontent-iwn-11="">
Kiwi
</option><option _ngcontent-iwn-11="">
Korean
</option><option _ngcontent-iwn-11="">
Latin
</option><option _ngcontent-iwn-11="">
American
</option><option _ngcontent-iwn-11="">
Lebanese
</option><option _ngcontent-iwn-11="">
Malaysian
</option><option _ngcontent-iwn-11="">
Mediterranean
</option><option _ngcontent-iwn-11="">
Mexican
</option><option _ngcontent-iwn-11="">
Middle Eastern
</option><option _ngcontent-iwn-11="">
Mongolian
</option><option _ngcontent-iwn-11="">
Moroccan
</option><option _ngcontent-iwn-11="">
Nepalese
</option><option _ngcontent-iwn-11="">
North Indian
</option><option _ngcontent-iwn-11="">
Pacific
</option><option _ngcontent-iwn-11="">
Persian
</option><option _ngcontent-iwn-11="">
Pizza
</option><option _ngcontent-iwn-11="">
Portuguese
</option><option _ngcontent-iwn-11="">
Pub Food
</option><option _ngcontent-iwn-11="">
Seafood
</option><option _ngcontent-iwn-11="">
Singaporean
</option><option _ngcontent-iwn-11="">
South Indian
</option><option _ngcontent-iwn-11="">
Spanish
</option><option _ngcontent-iwn-11="">
Sri Lankan
</option><option _ngcontent-iwn-11="">
Steakhouse
</option><option _ngcontent-iwn-11="">
Street Food
</option><option _ngcontent-iwn-11="">
Sushi
</option><option _ngcontent-iwn-11="">
Taiwanese
</option><option _ngcontent-iwn-11="">
Thai
</option><option _ngcontent-iwn-11="">
Turkish
</option><option _ngcontent-iwn-11="">
Vietnamese
</option>
</optgroup>
</select>
我的實際角度2模板是:
<select id="find-category-select"
class="form-control"
multiple required
[(ngModel)]="selectedCategories"
name="categories"
#multiselect>
<optgroup *ngFor="let category of categories" label="{{category.name}}">
<option *ngFor="let subcategory of category.subCategories">
{{subcategory}}
</option>
</optgroup>
</select>
<div id="icon" class="form-item-right-icon"></div>
在我afterViewInit我作出的選擇是bootstrap multiselect插件這樣的:
(<any>$("#find-category-select")).multiselect({
buttonWidth: '100%',
buttonContainer: '<div style="height: 34px;" />',
buttonClass: 'none',
nonSelectedText: "select categories",
nSelectedText: ' categories',
allSelectedText: "all categories",
selectAllNumber: false,
onDropdownShown: function() {
$('ul .caret-container').click();
},
onDropdownHidden: function() {
$('ul .caret-container').click();
},
maxHeight: 400,
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
includeSelectAllOption: false,
disableIfEmpty: true,
onSelectAll:() => {
this.changed();
},
onChange: (option: any, checked: any) => {
this.changed();
}
});
感謝。奇怪的是它被自動添加。我剛剛發佈我的角2 HTML模板。我是否應該研究如何去除殘疾人,或者是否有我做錯的事情導致殘疾人在那裏? – BeniaminoBaggins
「你正在自動添加」是什麼意思?如果實際情況是這樣的話,還有其他一些代碼需要參與。你在使用一些非角度部件庫嗎? –
我不知道bootstrap multiselect插件,但我毫不懷疑它設置了'disabled'屬性。 –