以角度获取多个复选框值

Question

I pulled data from getListOfCurrentSubtenants and populate it as you can see on the screenshot, user can select by clicking the checkbox. how do we get all the data that user check as a single object?

So if user click 5 boxes then the result would be a single array of objects with all the selected items.

sample object

[
    {
        "subtenantName": "Urgent Care MSO, LLC",
        "currentLeaseExpiration": "04/30/2023"
    },
    {
        "subtenantName": "Laboratory Corporation of America",
        "currentLeaseExpiration": "10/10/2028"
    }
]

html code

<div *ngIf="currentSubtenants.length > 0" class="deal-form-header-labels" style="padding-top: 5px;">Current Subtenants</div>
          <div *ngFor="let subtenant of currentSubtenants; let i = index;" class="subtenant-form-btn-group">
            <div class="deal-form-btn-group-radio" fxLayout="row" fxLayoutAlign="space-between center" >
              <div class="pharmacy-checkbox">
                <mat-checkbox
                 color="primary"
                 [(ngModel)]="dealDispositionFormFields.currentSubtenants"
                 (change)="changeCurrentSubtenants($event,subtenant)"
                 style="margin-left:10px;">
                 <div class="deal-text-label">
                   {{subtenant.subtenantName}}
                </div>
                </mat-checkbox>  
                </div>
            </div>
            <div >
              <div class="flex-column">
                <mat-label>Current Lease Expiration</mat-label>
                <div class="property-assignments-email secondary-text">{{subtenant.currentLeaseExpiration}}</div>
              </div>
            </div>
          </div>
        </div>

code

changeCurrentSubtenants(e:any,rowData:any){    
    if(e.checked){
      console.log("rowData" , rowData)
    }
  }

    getListOfCurrentSubtenants() {
          this.partnerRoleIsInProgress = true;
           this._dealService.getCurrentSubtenants(this.transactionData.propertyId)
            .pipe(
              finalize(() => this.partnerRoleIsInProgress = false),
            ).subscribe({
              next: (res) => {
                if (res.isSuccess) {
                  this.currentSubtenants = res.data;
                  console.log("res" , this.currentSubtenants)
                }
              },
              error: err => this._notificationService.showError(err),
              complete: noop
            });
        }

Answer 1

Without refactoring your code to much, you could add and remove these items in a array.

interface Data {
  subtenantName: string;
  currentLeaseExpiration: string;
}


results: Data [] = [];
changeCurrentSubtenants(e: any, rowData: Data) {
  if (e.checked) {
    this.results.push(rowData);
  } else {
    this.results = this.results.filter(item => item.subtenantName === rowData.subtenantName);
  }
}