我的 selectAll 功能无法正常工作

Question

我写了两个函数全选和手动选择，全选选择所有值并取消选择值手动选择工作正常，但全选功能没有检查和取消选中ui上的复选框，这里是各自的ts和html，如果我错了请指正

 selection = new SelectionModel(true, []); // remove on code cleaning
    bulkActionArr = [];
    checkAll: FormControl = new FormControl(false);

    selectAll(event: any, datasource) {
        this.checkAll.setValue(event.checked);
        this.bulkActionArr = [];
        if(event.checked)
        {datasource.forEach(element => {
            this.selection.select(element.id); 
            this.bulkActionArr.push(element.id)});
        }
        
        else {
            this.selection.clear();
            this.bulkActionArr = [];
        }
        console.log('1',this.bulkActionArr);

    }

    manualSelect(id: number, index: number, status: boolean, datasource: any[]) {
        // if(this.checkAll.value){
        //    this.checkAll.setValue(false);
        //    this.bulkActionArr =[]
        // }
        if (status) {
            this.bulkActionArr.push(id);
        } else {
            const indexOfId = this.bulkActionArr.indexOf(id);
            if (indexOfId !== -1) {
                this.bulkActionArr.splice(indexOfId, 1);
            }
        }
        if (this.bulkActionArr.length == datasource.length) {
            console.log(datasource.length);
            this.checkAll.setValue(true);
        }
        else{
            this.checkAll.setValue(false);
        }
        console.log('status',status);
        console.log('2','bulkarr',this.bulkActionArr,'checkall ', this.checkAll.value,'datasource', datasource.length, this.bulkActionArr.length)
    }
pe here

  <table mat-table [dataSource]="dataSource" matSort matSortActive="id" matSortDisableClear matSortDirection="desc">
        <ng-container matColumnDef="isChecked">
            <th class="isChecked"  mat-header-cell *matHeaderCellDef>
                <mat-checkbox [formControl]="checkAll" (change)="selectAll($event, dataSource)"></mat-checkbox>
            </th>
            <td class="px-3" mat-cell *matCellDef="let row; let i = index;" class="text-start">
                <mat-checkbox (change)="manualSelect(row.id ,i, $event.checked,dataSource)"></mat-checkbox>
            </td>
        </ng-container>

Answer 1

在 Angular 中，通常您在 .ts 中使用“变量”并绑定到 .html。这让一切变得“更容易”。

我想你的“bulkActionArr”数组的功能是这样的

this.bulkActionArr:boolean[]=this.dataSource.data.map(x=>false);

<td class="px-3" mat-cell *matCellDef="let row; let i = index;" class="text-start">
    <mat-checkbox [(ngModel)]="bulkActionArr[i]"></mat-checkbox>
</td>

所以

selectAll($event, dataSource){
    this.bulkActionArr.forEach(x=>{
       x=$event;
    })
}

当您想知道检查了数据源的哪些元素时

getCheckedRows()
{
    return this.dataSource.data.filter((x:any,i:number)=>this.bulkActionArr[i])
}