title: Change value in checklist data
body: <p>I have problem when change value in checklist data, i have a table approve leader include checkbox and another data. I cannot change the value in checked data.</p>
  
  <p>this is picture my table 
  <a href="https://i.stack.imgur.com/eWdgn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eWdgn.png" alt="enter image description here"></a></p>
  
  <p>this is my code in component.ts</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { AlertService } from '../../../../component/alert/alert.service';
  import { BookingMeetingRoomModel } from '../../../../model/booking-meeting-room.model';
  import { ApprovalLeaderService } from './approval-leader.service';
  
  
  @Component({
      selector: 'approval-leader',
      templateUrl: 'approval-leader.component.html'
  })
  export class ApprovalLeaderComponent implements OnInit {
      public approvalLeaders: BookingMeetingRoomModel[];
      public approvalLeader: BookingMeetingRoomModel;
      public format_time: string = 'HH:mm';
      public date_time: Date;
      public loaded: boolean = true;
      public btnControl: boolean = true;
      public showForm: string = 'this';
      public isRefresh: boolean = false;
      public selectedEntity: boolean = false;
  
      // public data;
      public filterQuery = '';
      public rowsOnPage = 10;
      public sortBy = 'Name';
      public sortOrder = 'asc';
  
      constructor(
          private alertService: AlertService,
          private approvalLeaderService: ApprovalLeaderService,
      ) { }
  
      public ngOnInit(): void {    
          this.date_time = new Date();    
          this.getData();   
      }
      private getData(): void {
          this.loaded = false;
          this.approvalLeaderService.getAll().subscribe(s =&gt; {
              this.approvalLeaders = s;
              this.loaded = true;
          }, e =&gt; { 
            this.loaded = true; 
            this.alertService.error(e.status, e.statusText, e._body); });
      }
  
      // navigate form parent to child section
      public goThis(refresh: boolean): void {
          this.showForm = 'this';
          if (refresh === true) { this.isRefresh = true; this.getData(); }
      }
  
      public setSelectedEntity(check: boolean, mf) {
          if(mf !== null &amp;&amp; mf !== undefined){
              mf.data.forEach(f =&gt; {
                      f.isSelector= check;
                      f.approvalL1UserStatus = 1;
                      console.log(f.isSelector);
              })
          }
  
      }
  
      public isSelection(mf) {
          if (mf === null || mf.undefined) return false;
          if (mf.data.some(s =&gt; s.isSelector == true) === true) return true;
          else return false;
       }
  
       public onApprove(mf){
          if (mf === null || mf.undefined) return;
          if (!this.btnControl) { return; }
          this.btnControl = false;
          let approved = mf.data.filter(f =&gt; f.isSelector == true);
  
  
          this.approvalLeaderService.save(approved)
              .subscribe(
                  s =&gt; {
                      this.alertService.success('Booking Approved');
                      this.btnControl = true;
                  },
                  e =&gt; {
                      this.btnControl = true;
                      this.alertService.error(e.status, e.statusText, e._body);
                  });
                  console.log(approved);
       }
  
       public onReject(mf){
          if (mf === null || mf.undefined) return;
          if (!this.btnControl) { return; }
          this.btnControl = false;
          let approved = mf.data.filter(f =&gt; f.isSelector == true )
          this.approvalLeaderService.save(approved)
              .subscribe(
                  s =&gt; {
                      this.alertService.success('Booking Rejected');
                      this.btnControl = true;
                  },
                  e =&gt; {
                      this.btnControl = true;
                      this.alertService.error(e.status, e.statusText, e._body);
                  });
                  console.log(approved);
       }
  }
  </code></pre>
  
  <p>this is my component.html</p>
  
  <pre><code>&lt;div [hidden]="showForm !== 'this'" [hidden]="showForm !== 'this'" class="card animated fadeIn"&gt;
      &lt;div class="card-header"&gt;
          &lt;strong&gt;{{ 'Approval Event' | translate }}&lt;/strong&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
          &lt;div class="row animated fadeIn" *ngIf="loaded else loading"&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;div class="form-group form-inline"&gt;
                      &lt;label class="label-control"&gt;{{ 'Show row' | translate }} &amp;nbsp; &amp;nbsp;&lt;/label&gt;
                      &lt;select class="form-control input-sm" [(ngModel)]="rowsOnPage"&gt;
                          &lt;option [ngValue]="5"&gt;5&lt;/option&gt;
                          &lt;option [ngValue]="10"&gt;10&lt;/option&gt;
                          &lt;option [ngValue]="15"&gt;15&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="d-flex flex-row-reverse"&gt;
                          &lt;input class="form-control" [(ngModel)]="filterQuery" placeholder="{{ 'Search Name' | translate }}.." /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;table class="table table-striped" [mfData]="approvalLeaders | dataNameFilter : filterQuery" #mf="mfDataTable"
                      [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th style="width: 7%"&gt;
                                  All &lt;input type="checkbox" [checked]="selectedEntity" (change)="selectedEntity = !selectedEntity; setSelectedEntity(selectedEntity, this.mf)"&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 10%"&gt;
                                  &lt;mfDefaultSorter by="employee"&gt;{{ 'Employee Name' | translate }}&lt;/mfDefaultSorter&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 15%"&gt;
                                  &lt;mfDefaultSorter by="location"&gt;{{ 'Location' | translate }}&lt;/mfDefaultSorter&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 15%"&gt;
                                  &lt;mfDefaultSorter by="meetingroom"&gt;{{ 'Meeting Room' | translate }}&lt;/mfDefaultSorter&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 10%"&gt;
                                  &lt;mfDefaultSorter by="dateFrom"&gt;{{ 'Date From' | translate }}&lt;/mfDefaultSorter&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 10%"&gt;
                                  &lt;mfDefaultSorter by="dateTo"&gt;{{ 'Date To' | translate }}&lt;/mfDefaultSorter&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 10%"&gt;
                                  &lt;mfDefaultSorter by="bookingType"&gt;{{ 'Agenda' | translate }}&lt;/mfDefaultSorter&gt;
                              &lt;/th&gt;
                              &lt;th style="width: 20%"&gt;
                                  {{ 'Status' | translate }}
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr *ngFor="let approvalL1 of mf.data"&gt;
                              &lt;td&gt;
                                  &lt;input *ngIf=" approvalL1.approvalL1UserStatus !== 1"
                                      type="checkbox" [checked]="approvalL1.isSelector" (change)="approvalL1.isSelector = !approvalL1.isSelector" /&gt;
                              &lt;/td&gt;
                              &lt;td&gt;{{ approvalL1.employee.name }}&lt;/td&gt;
                              &lt;td&gt;{{ approvalL1.meetingRoom.location.name }}&lt;/td&gt;
                              &lt;td&gt;{{ approvalL1.meetingRoom.name }}&lt;/td&gt;
                              &lt;td&gt;{{ approvalL1.bookingTime }}&lt;/td&gt;
                              &lt;td&gt;d&lt;/td&gt;
                              &lt;td&gt;{{approvalL1.agenda }}&lt;/td&gt;
                              &lt;td&gt;{{ approvalL1.approvalL1UserStatus | approvalL1User }}&lt;/td&gt;
                          &lt;/tr&gt;
  
                      &lt;/tbody&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;td colspan="5"&gt;
                                  &lt;mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"&gt;&lt;/mfBootstrapPaginator&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tfoot&gt;
                  &lt;/table&gt;
                  &lt;button class="btn btn-sm btn-success mr-3" (click)="onApprove(this.mf)"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&amp;nbsp; {{ 'Approve' | translate }}&lt;/button&gt;
                  &lt;button class="btn btn-sm btn-danger"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&amp;nbsp; {{ 'Reject' | translate }}&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;ng-template #loading&gt;
              &lt;loader&gt;&lt;/loader&gt;
          &lt;/ng-template&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the problem is i cannot change the value in array data checklist(you can see the output json in picture my table), i want change the value model approvalLeaderUserStatus = 1.</p>