将 angular2 select/option 更改为 ul/li 绑定到选择

Question

我想将以下 select、option 标签改为 ul、li。

<select [(ngModel)]="selectedLanguage" name="selectedLanguage">
                    <option *ngFor="let lang of languages" [value]="lang">{{lang}}</option>
                </select>

理想情况下，它应该是引导程序友好的，例如：

<ul class="dropdown-menu">
   <li>...</li>
</ul>

有人可以帮忙吗？谢谢

编辑：如果我只是将 select 更改为 ul 并将 option 更改为 li 我会得到

error_handler.js:49ORIGINAL EXCEPTION: No value accessor for form control with name: 'selectedLanguage'

我想 [value] 标签在 li 上无效，但我不太确定如何修复它

我需要 [(ngModel)]="selectedLanguage" 更新为所选 li

Answer 1

重写应该像以下一样简单：

<ul class="dropdown-menu">
    <li *ngFor="let lang of languages" (click)="selectedLanguage = lang">{{lang}}</li>
</ul>

Working plunker for example usage

Answer 2

您不能将 [(ngModel)]="..." 与 <ul> 一起使用。这仅适用于提供 ControlValueAccessor 的组件。您需要为支持 ControlValueAccessor 的 <ul> 元素实例化一个组件才能完成这项工作。

将 angular2 select/option 更改为 ul/li 绑定到选择

Change angular2 select/option to ul/li binded to selection

twitter-bootstrap-3

angular2-template

angular