I am currently working on an application where I need to create a function that will delete the selected checkboxes from an array. I have managed to log the number of checkboxes that are selected, but I am struggling to retrieve the index numbers of these checkboxes and only delete those specific ones. In the delete function, I need to splice out the rows corresponding to the selected checkboxes from the main array.
Below is the HTML code snippet:
<ng-container *ngFor="let reasoncode of displayReasonCodes$ | async; let i = index">
<tr class= "row-break">
<checkbox type="checkbox" name="sizecb[]" value="{{reasoncode.id}}" [(ngModel)]="reasoncode.state">
</checkbox>
<td>
<form>
<form-group>
<textbox [readOnly]="isEditable" ngModel="{{reasoncode.ReasonCode}}" name="textbox" ></textbox>
</form-group>
</form>
</td>
<td>
<form>
<form-group>
<textbox [readOnly]="isEditable" ngModel="{{reasoncode.Description}}" name="textbox1" ></atextbox>
</form-group>
</form>
</td>
<form>
<p>
<toggle-switch ngModel="{{reasoncode.Status}}" name="switch1" ></toggle-switch>
</p>
</form>
</tr>
</ng-container>
</tbody>
</table>
Here is the component.ts file:
export class ReasonCodesComponent implements OnInit {
checkAll(event: any) {
if (!this.result) return;
this.result.forEach((x: any) => x.state = event.target.checked)
}
isAllChecked() {
if (this.arr) return;
return this.result.every((_: any) => _.state);
}
check(result: any) {
result.state == false;
result.state! = result.state;
}
@select(store.displayReasonCodes) displayReasonCodes$: Observable<IReasonCodes>;
arr: any[];
state: any;
$event: any;
displayReasonCodes: any;
x: any;
_: any;
result: any;
isEditable: boolean;
constructor(private reasonCodesActions: ReasonCodesActions) {
}
reasoncodeObject:Object;
ngOnInit() {
this.displayReasonCodes$.subscribe(data => this.result = data )
}
deleterow() {
this.result.forEach((x: any) => {
if (x.state) { alert(x.state) /// here i am getting true as alert for number of rows selected and when i clcik on delete.
let copyObj = this.displayReasonCodes$.subscribe(data1=>this.data=(JSON.parse(JSON.stringify(data1))));
console.log(this.data) ; //data contains the array of objects, from which i have to splice up the number of selected rows from table.
};
})
}
}
The goal is to remove the selected rows in the checkbox and display the remaining ones.