Если этот флажок снят, массив угловых материалов не обновляется в Angular

Question

Я отображаю данные, которые выбираются из модальных. Отменив выбор, я удаляю данные из массива. Теперь, когда я отменяю выбор любой из данных, данные проверяются: ложные и не отображаются, но при повторном открытии модальные невыбранные данные показывают выбранные.

ts файл, из которого открывается модал:

postGraduate = [
    {
      text: 'Magistar',
      checked: false
    },
    {
        text: 'Master',
        checked: false
    },
    {
        text: 'Doktor nauka',
        checked: false
    },
    {
        text: 'Specijalista',
        checked: false
    }
  ];
therapistDetails = {
postGraduate: ['Magistar', 'Master', 'Doktor nauka', 'Specijalista']
}

if(this.therapistdetails.postGraduate && this.therapistdetails.postGraduate.length) {
   this.therapistdetails.postGraduate.forEach(element => {
     this.postGraduate.forEach((graduate) => {
        if(graduate.text == element) {
           graduate.checked = true;
         }
      })
    });
   }

addGraduationModal() {
    const graduation = {
      title: 'Graduation',
      data: this.postGraduate
    }
    let dialogRef = this.dialog.open(ModalDialogComponent, {
      width: '400px',
      data: graduation,
    })
    dialogRef.afterClosed().subscribe(result => {
      console.log('after closed value... ', result);
      if (result && result.action && result.action == 'graduation') {
        this.therapistdetails.postGraduate = response.graduation;        
      }
    })
  }

HTML-файл:

<div class="row">
  <div *ngIf="therapistdetails.postGraduate">
    <div *ngFor="let postgraduate of therapistdetails.postGraduate; let i =index" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <div class="row ">
         <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
             <p class="check-box">
             <mat-checkbox [checked]="therapistdetails.postGraduate[i]"> 
             </mat-checkbox>
             </p>
           </div>
          <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
             <p class="master">
             <mat-form-field                                                  
               floatPlaceholder="never"                                                   
               class="margin-top-25px">
              <input                                                   
               class="input"                                                     
               matInput                                      
               [(ngModel)]="therapistdetails.postGraduate[i]"
               placeholder="Year of graduation" >
            </mat-form-field>
             </p>       
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <p class="Addmore pointer" (click)="addGraduationModal()" >Add More</p>
   </div>
  </div>

модальный файл TS:

constructor(public thisDialogRef: MatDialogRef<ModalDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, private formBuilder: FormBuilder) { 
    }
ngOnInit() {
    if(this.data.data && this.data.data.length) {
      this.orderForm = this.formBuilder.group({
        items: this.formBuilder.array([ ])
      })

      this.setCheckBoxValue();
    }
  }

  setCheckBoxValue() {
    this.items = this.orderForm.get('items') as FormArray;
    this.data.data.forEach((element) => {
      this.items.push(this.formBuilder.group({
        text: element.text,
        checked: element.checked,
      }))
    });
  }

  onCloseConfirm() {
    if(this.data.title == 'Graduation') {
      this.thisDialogRef.close({ 
        action: 'graduation', 
        postGraduate: this.orderForm ? this.orderForm.controls.items.value.filter((value) => value.checked == true) : []
      });
    }
  }

** файл модального шаблона: **

<div>
  <h2 mat-dialog-title> {{data.title}} </h2>
  <hr>

  <mat-dialog-content>
    <div *ngIf="data.data.length" [formGroup]="orderForm">
      <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls;let i=index">
        <div class="row" [formGroupName]="i">
          <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" >
            <mat-checkbox formControlName="checked" name="selected" class="ml-a" [checked]="item.controls.checked.value" >
            </mat-checkbox>
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" >
            <mat-form-field 
            floatPlaceholder="never" class="margin-top-25px example-full-width" >
                <input 
                matInput
                class="input" name="checked"
                formControlName="text"
                value="{{item.controls.text.value}}"               
                >
            </mat-form-field>
          </div>
        </div>
      </div>
    </div>
  </mat-dialog-content>

  <div>
    <hr>
    <mat-dialog-actions style="float: right">
      <button mat-raised-button (click)="onCloseCancel()" class="btn-style-cancell">Cancel</button>
      <button mat-raised-button (click)="onCloseConfirm()"
       class="btn-style">Confirm</button>
    </mat-dialog-actions>
  </div>
</div>

Когда я снял флажок. postGraduate [] не обновляется. Пожалуйста, помогите мне ..

Answer 1

Использовать событие изменения.Вызовите одну функцию при изменении следующим образом:

<mat-checkbox formControlName="checked" name="selected" class="ml-a" [checked]="item.controls.checked.value" (change)="isChecked($event, item)" >
</mat-checkbox>

где, $ event дает вам флажок или не отмечен, и элемент - это ваш элемент, который вы хотите добавить в массив.

В тсвот так можно реализовать:

isChecked(e, item) {

}

Answer 2

[проверено] ожидайте логическое значение, однако вы используете therapistdetails.postGraduate, который представляет собой массив строк.

Я думаю, вы должны использовать postGraduate как:

<div *ngFor="let pg of postGraduate;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    ...
        <mat-checkbox [(ngModel)]="pg.checked"></mat-checkbox>
    ...

Answer 3

Используйте [(ngModel)] вместо [проверено]

Заменить

[checked]="therapistdetails.postGraduate[i]"

с

[(ngModel)]="therapistdetails.postGraduate[i]"