Selected.js in Angular2 中不识别更改

Question

我使用选择的.js库来显示/渲染下拉列表。我有以下下拉html：

<select [(ngModel)]="myModel" data-placeholder="Some Dropdown Value" id="my-dropdown"
    class="chosen-select" (change)="onChange($event.target.value)">
<option value=""></option>
<optgroup label="Group 1">
    <option *ngFor="let entry1 of entries1" [ngValue]="entry1['id']"
            class="dropdown-item">
        {{entry1['name']}}
    </option>
</optgroup>
<optgroup label="Group 2">
    <option *ngFor="let entry2 of entries2" [ngValue]="entry2['id']"
            class="dropdown-item">
        {{entry2['name']}}
    </option>
</optgroup>

此选择完美有效，更改得到识别，myModel具有正确的值。

使用 selected.js 时，从上面选择的 html 将转移到下面：

<div class="chosen-container chosen-container-single chosen-container-active" title="" id="my_dropdown_chosen" style="width: 250px;">
<a class="chosen-single">
    <span>Some Dropdown value</span>
    <div><b></b></div>
</a>
<div class="chosen-drop">
    <div class="chosen-search">
        <input class="chosen-search-input" type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
        <li class="group-result">Group 1</li>
        <li class="active-result group-option dropdown-item" data-option-array-index="2" style="">
            Some Value 1
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="3" style="">
            Some Value 2
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="4" style="">
            Some Value 3
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="5" style="">
            Some Value 4
        </li>
        <li class="active-result group-option dropdown-item" data-option-array-index="6" style="">
            Some Value 5
        </li>
    </ul>
</div>

下拉菜单看起来相当不错，但当然不再识别更改，因为它是完全不同的 html，在应用程序运行时呈现。你怎么能做到这一点？

有没有类似角度选择库的东西，但对于角度 2 而不是 1？

Answer 1

你必须为 angular 2 找到一个"选定的库"，你不能只实现 js 文件，因为你没有 angular 组件的上下文。

也许它可以帮助您：角度选择