从下拉菜单中删除拼接的项目

时间:2017-03-24 15:18:15

标签: javascript jquery angular drop-down-menu

我在下拉列表中有一个项目列表,目前每当我点击/选择其中一个下拉项目时,它会被添加到不同的数组中,然后我想将其从列表中删除。

这就是我所拥有的:

<li *ngFor="let item of dropdownlist ">
    <a (click)="select(item) " class="dropdown-item ">
        <i class="fa fa-fw " [ngClass]="{ 'fa-check': item.checked, 'glyphicon-none': !item.checked} "></i>
    </a>
</li>

 select(item: any) {
    item.checked = !item.checked;
    this.containers.push(item);
    this.dropdownlist.splice(item.checked);
  }

 dropdownlist: Array<any> = [];

 containers: Array<Panel> = [
     new Panel(1, 'Test1', 'export data', 'test data in modal'),
     new Panel(2, 'Test2','export image', 'more test data'),
     new Panel(3, 'Test3', 'export data', 'more and more data')
 ];

我的问题是,当下拉菜单只有一个项目并且我尝试将其添加到另一个数组时,它不会从下拉列表中删除。

1 个答案:

答案 0 :(得分:1)

.splice()可以带有多个参数:

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

在您的情况下,为确保您只删除所需的项目,请确保第二个参数= 1,并传递要删除的项目的索引:

<li *ngFor="let item of dropdownlist; let i = index ">
    <a (click)="select(item, i) " class="dropdown-item ">
        <i class="fa fa-fw " [ngClass]="{ 'fa-check': item.checked, 'glyphicon-none': !item.checked} "></i>
    </a>
</li>

select(item: any, index: number) {
     item.checked = !item.checked;
     this.containers.push(item);
     this.dropdownlist.splice(index, 1);
}