以下是一个基于Angular 2的带排序的双列表组件的解决方法的代码示例:
dual-list.component.ts
:import { Component } from '@angular/core';
@Component({
selector: 'app-dual-list',
templateUrl: './dual-list.component.html',
styleUrls: ['./dual-list.component.css']
})
export class DualListComponent {
leftList: string[] = ['Item 1', 'Item 2', 'Item 3'];
rightList: string[] = [];
moveRight() {
const selectedItems = this.leftList.filter(item => item.selected);
this.rightList = this.rightList.concat(selectedItems);
this.leftList = this.leftList.filter(item => !item.selected);
}
moveLeft() {
const selectedItems = this.rightList.filter(item => item.selected);
this.leftList = this.leftList.concat(selectedItems);
this.rightList = this.rightList.filter(item => !item.selected);
}
sortList(list: string[]) {
list.sort((a, b) => a.localeCompare(b));
}
}
dual-list.component.html
:
Left List
-
{{item}}
Right List
-
{{item}}
dual-list.component.css
:.selected {
background-color: #ccc;
}
app.component.html
文件中添加以下代码:
这样就可以在父组件中使用这个带排序的双列表组件了。