清晰模式不适用于ngFor

如何解决清晰模式不适用于ngFor

我对清晰度模式有疑问。

我有一个ngFor显示列表。在该ngFor中，我有一个按钮来显示模态。当我单击按钮时，它将显示列表中每个项目的模态。

我以前使用过ngbootstrap模态，它运行良好，只显示一个模态。

显示模态的组件本身在另一个组件内部，但是之前（在它是引导程序版本时）没有干涉。我认为这与布尔值变为“ true”有关，因此对所有模态都成立。

如何使用清晰模式重现ngbootstrap模式的行为？

我试图放入他自己的子组件，但是它也不起作用。

HTML：

<div class="details">
    <div class="">
        <div *ngFor="let content of doctors" [ngClass]="{'deleted': content.deleted}">
            <mat-divider></mat-divider>
            <div class="subscription">

                <div class="dashboard-agendas" [ngClass]="{'list-group-item-danger': content.deleted}">
                    <div class="dash-title">Nom de l'agenda : {{content.information.name}}</div>
                    <clr-dropdown [clrCloseMenuOnItemClick]="true">
                        <button class="dropdown-toggle btn btn-outline-primary" *ngIf="!content.deleted"
                            clrDropdownTrigger>Options
                            <clr-icon shape="caret down"></clr-icon></button>
                        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                            <button (click)="onNavigateEdition(content)" routerLinkActive="router-link-active"
                                class="dropdown-item" clrDropdownItem>Modifier
                                l'agenda</button>
                            <button [routerLink]="['/webSite']" routerLinkActive="active" class="dropdown-item"
                                clrDropdownItem>Configurer
                                le
                                site</button>
                            <button class="dropdown-item" clrDropdownItem>Importer les contacts</button>
                            <button (click)="opened = true" class="dropdown-item" clrDropdownItem>Suspendre
                                cet agenda</button>
                        </clr-dropdown-menu>
                        <button *ngIf="content.deleted" (click)="restoreAgenda(content)"
                            class="btn btn-outline-danger">RéACTIVER </button>

                    </clr-dropdown>
                    <hr>
                    <div class="agenda-informations">
                        <div class="dash">Email: {{content.email}}</div>
                        <div class="dash">Téléphone: {{content.information.phoneNumber}}</div>
                        <div class="dash">Téléphone portable: {{content.information.mobilePhoneNumber}}</div>
                        <div class="dash">Adresse: {{content.information.address}}</div>
                    </div>
                    <div class="agenda-informations-comp">
                        <div class="dash">Code postal: {{content.information.zipcode}}</div>
                        <div class="dash">Ville: {{content.information.city}}</div>
                        <div class="dash">CTI : {{content.information.ctiId}}</div>
                    </div>
                </div>

                <!-- <app-deletion-confirmation [opened]="opened" [content]="content" [idOrg]="idOrg"
                    (openModal)="displayChange($event)"></app-deletion-confirmation> -->

                <clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" class="fadeDown in modal-dialog">
                    <h4 class="modal-title">Demande de confirmation</h4>
                    <div class="modal-body">
                        <p>Vous allez désactiver cette agenda</p>
                        <p>Confirmez-vous ?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" (click)="deleteAgenda(content)"
                            (click)="opened = false">Valider</button>
                        <button type="button" class="btn btn-danger" (click)="opened = false">Annuler</button>
                    </div>
                </clr-modal>

            </div>
        </div>
    </div>
</div>

TS：

 import { Component,OnInit,Input } from '@angular/core';
    import { HttpRequestService } from 'src/app/core/http/http-request.service';
    import { Router } from '@angular/router';
    import { DataSharedService } from 'src/app/core/services/data-shared.service';
    import { faTimes } from '@fortawesome/free-solid-svg-icons';

    @Component({
      selector: 'app-agenda-display',templateUrl: './agenda-display.component.html',styleUrls: ['./agenda-display.component.scss'],animations: [

      ]
    })
    export class AgendadisplayComponent implements OnInit {

     @input() doctors;
     @input() idOrg;
     @input() onShow;

     faTimes = faTimes;

     opened: boolean = false;

      constructor(private http: HttpRequestService,private router: Router,private data:        DataSharedService) { }

      ngOnInit(): void {
    
      }

      restoreAgenda(doctor: any) {
       this.http.restoreAgenda(this.idOrg,doctor.doctorRoleId).subscribe(data => {

      doctor.deleted = false;

    })

    }

     onNavigate(orga) {
      this.data.setSessionStorage('idOrg',orga.id);
      this.router.navigate(['/creation']);
    }

     onNavigateEdition(user) {
       this.router.navigate(['/creation'],{ queryParams: { edition: user.userId } });
     }

     displayChange(e) {
       e = false;
     }

     deleteAgenda(doctor: any) {
       this.http.deleteAgenda(this.idOrg,doctor.doctorRoleId).subscribe(data => {

        doctor.deleted = true;
       this.opened = false;
      });

     }

     // onCloseModal() {
     //   this.openModal.emit(this.opened);
     // }
    }

任何帮助表示赞赏。