javascript - 从下拉列表中选择多个项目以填充在页面上

Question

我正在不同面板中显示数组中的数据，用户可以选择从 View 中删除面板，并且删除的面板将填充在下拉菜单中。用户可以灵活地选择多个面板标题，以使用所选面板重新填充页面。

目前我可以删除面板 - 将它们推送到新数组并使用从数组中删除的面板标题填充下拉列表。

我正在使用 bootstrap 和 Angular - 此时我无法正确显示下拉菜单，并且不确定出了什么问题......这是我的下拉菜单 html:

<select multiple>
  <option *ngFor="let item of dropdownlist">{{item.title}}</option>
</select>

这只是显示为一个空矩形，当我删除面板时，标题显示在下拉列表中，但似乎缺少样式

这就是我想要的样子:

这也是我删除面板并将其添加到数组的方式:

<a title="Remove Panel" (click)="removePanel(i);">
   <i class="glyphicon glyphicon-remove"></i>
</a>

removePanel(index: number): void {
    this.dropdownlist.push(new Object(this.items.splice(index, 1)[0]));
    }

dropdownlist: Array<any> = [];

items: Array<Panel> = [
        new Panel(1, 'panel 1', 'show text', 'test data in modal'),
        new Panel(2, 'panel 2','show image', 'more test data'),
        new Panel(3, 'panel 3', 'show graph', 'more and more data')
    ];

我也不确定我的添加函数从下拉菜单到项目的外观如何，并且与我的removePanel函数相反？

Answer 1

这不是您问题的答案，但我建议您使用select2