以下是一个使用Angular 9的多选框删除示例:
{{ item.name }}
selectedItems
属性来存储选中的项,并实现deleteSelected()
方法来删除选中的项:import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' }
];
selectedItems: { [key: number]: boolean } = {};
deleteSelected() {
for (const itemId in this.selectedItems) {
if (this.selectedItems[itemId]) {
// 在此处执行删除操作
// 例如,从列表中移除选中的项
const index = this.items.findIndex(item => item.id === Number(itemId));
this.items.splice(index, 1);
}
}
// 清空选择
this.selectedItems = {};
}
}
在上述代码中,我们使用一个对象来存储每个项的选中状态。键是项的ID,值是布尔值,表示该项是否被选中。在deleteSelected()
方法中,我们遍历selectedItems
对象,找到选中的项,并执行删除操作。最后,我们清空selectedItems
对象以重置选择。
这是一个简单的示例,你可以根据自己的需求进行扩展和修改。