Binding and getting value of dynamic collection of checkboxes using Typescript

I am creating a collection of dynamic checkboxes as per my data structure. Here is my HTML

  <tr *ngFor='let p of data'>
    <td><input id="" type="checkbox" value="" [(ngModel)]="p.isChecked" (change)="changeCheckSelection()" /></td>
    <td></td>

  </tr>

Here is my data model:

 Idata:
 {
  id:string;
  name: string;
  isChecked:boolean
 }

i'm binding "isChecked" property to each "tr" checkbox which is set to false initially in my model.

I have a table header checkbox which does toggle functionality for all the "tr" checkboxes.

Here is my table header checkbox HTML:

   <input type="checkbox" id="checkAll" (click)="changeCheckAll()" [(ngModel)]  ="checkAllValue" />

In my .ts file

  changeCheckAll(): void {
    var setStatus = !this.checkAllValue;
    var myData:Idata;
    var selectedRecord: Idata;
    var checkedItems = jQuery("#mytable input[type='checkbox'][id!=checkAll]");
    for (let item = 0; item < checkedItems.length; item++) {

        (checkedItems[item] as HTMLInputElement).checked = setStatus;

        if (setStatus) {
            myData= checkedItems[item].attributes["value"].value;
            selectedRecord = this.payoutLookupDictionary[myData.pId];

            // If record exists then push to selected payments object
            if (selectedRecord) {
                this.selectedDataCollection.push(selectedRecord);
            }
        } else {

            // clear the selection and its data
            this.selectedDataCollection= [];
        }
    }

My problem is:

1. I was getting [object object] as the checkbox has binding value of my "Idata" model. myData= checkedItems[item].attributes["value"].value;

When i do myData. "its Properties", i was getting undefined. I tried by casting and it didn't work. Also myData is property type of "Idata" which it should load the result. What am i missing ? and how do i read the checkbox value here?

2. As my row level checkboxes are dynamic and i was binding "isChecked" property to each checkbox. I was doing below logic when an individual checkbox is toggled ON/OFF. But, this binding is not fetching me right result as some of the checkboxes binding value was returning me "false" event though they are checked ("true"). Any better approach here?

   changeCheckSelection() {
   
   this.payList.payoutOrder.forEach(v => v.isChecked ? this.add this.myDict[v.Id], v.isChecked)
       : this.delete(this.myDic[v.Id], v.isChecked));
   
   console.log("New Objects count in selected list:" + this.selectedDataCollection.length.toString());
   for (let i = 0; i < this.selectedDataCollection.length; i++) {
       console.log(this.selectedDataCollection[i]);
   }
   
   

   }

   delete(key, checkBoxState) {
   if (typeof checkBoxState != 'undefined' && !checkBoxState) {
       var item = this.selectedDataCollection.indexOf(key);
       this.selectedDataCollection.splice(item, 1);
   }
   
   

   }

   add(key, checkBoxState) {
   if (typeof checkBoxState != 'undefined' && checkBoxState) {
       this.selectedDataCollection.push(key);
   }
   }