以下是一个在Angular中使用ngFor来实现全选和取消全选的示例代码:
全选
{{ item.name }}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = [
{ name: 'Item 1', checked: false },
{ name: 'Item 2', checked: false },
{ name: 'Item 3', checked: false },
{ name: 'Item 4', checked: false }
];
selectAll = false;
selectAllItems() {
for (let item of this.items) {
item.checked = this.selectAll;
}
}
checkAllSelected() {
let allSelected = true;
for (let item of this.items) {
if (!item.checked) {
allSelected = false;
break;
}
}
this.selectAll = allSelected;
}
}
在上述代码中,selectAll变量用于表示是否全选,当点击全选复选框时,会调用selectAllItems()方法,将items数组中的每个项的checked属性设置为selectAll的值。在点击每个项的复选框时,会调用checkAllSelected()方法,检查是否所有的项都被选中,并更新selectAll的值。
这样,当全选复选框被选中时,所有的项都会被选中;当某个项的复选框被取消选中时,全选复选框也会被取消选中。