在我的模式中，我的所有项目在第一个打开时都是取消选中的，当我选中项目时，关闭模式并重新打开它，我希望我的所有项目将像第一个打开一样取消选中。 现在，当我选中item并重新打开模式时，这个项目保持选中状态。 我可以做什么来解决这个问题？

模式parent.component.html

<app-modal [show]="showModal" [customClass]="'custom_modal_class'" [closeCallback]="closeWithoutSending">

            <div class ="body">
                <div class="header">  
                    <br>
                    <input type="textarea" placeholder="Type your message here..." [(ngModel)]="userContent"> &nbsp;
                    <br>
                    <label class="btn btn-default">
                        <input type="file" hidden (change)="pickFile($event)">
                    </label>
                    <button (click)="toggleModal()">
                        <span>Envoyer</span>
                    </button>
                    <br>
                </div>

                <div class="content">
                    <app-contact  (demo)="onCheckContact($event)"           
                    *ngFor="let contact of contacts; let i = index"
                      [indexOfContact]="i"
                      [contactName] ="contact.itemName"
                      [(contact)]="contact"
                      >
                    </app-contact>
                </div>
                <br>
                <div class="content">
                    <app-groupe (groupEventEmitter)="onCheckGroup($event)"              
                    *ngFor="let group of groups; let i = index"
                    [indexOfGroup]="i"
                    [groupName] ="group.itemName"
                    [group] ="group" >
                    </app-groupe>
                </div> 

            </div>               





        </app-modal> 

parent.component.js

....  

    onCheckContact(contact) {

       if (!this.selectedContacts.includes(contact)) {
            this.selectedContacts.push(contact);
        } else {

          for(let i in this.selectedContacts){
            if(this.selectedContacts[i].phone === contact.phone){
              var index = this.selectedContacts.indexOf(this.selectedContacts[i]);
              console.log('index '+index+' i '+i);
              if (index > -1) {
                this.selectedContacts.splice(index, 1);
              } 
            }
          }

        }
          for(let i in this.selectedContacts){
            console.log(' Selected  i '+i+' Contacts name '+this.selectedContacts[i].itemName+' phone '+this.selectedContacts[i].phone);
          }
         // alert('Selected Contacts '+this.selectedContacts);

        }

....


closeWithoutSending = () => {
  this.showModal = !this.showModal;
  this.selectedContacts = [];
}

子组件:

contact.component.html:

null

<div class="head">

    <div class="item-checkbox">
        <label>{{ contact.itemName }}<input type="checkbox" class="custom-control-input" id= "indexOfContact" [(checked)]="contact.selected" (change)="onCheckContact(contact)"></label>
      </div>
</div>

null

contact.component.js

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Contact } from '../models/Contact.model';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {
  @Input() contactName: string;
  @Input() indexOfContact: number;
  @Input()contact:Contact;
  @Output() contactEventEmitter = new EventEmitter<string>();
  @Input() selected:boolean;

  constructor() { }

  ngOnInit() {


  }

  onCheckContact(contact) {
        console.log(' Selected  Contact '+contact.itemName);
        this.contactEventEmitter.emit(contact);
        this.selected = true;

    }

}