jquery - 带有角度的Jquery错误

Question

我已经创建了一个带有角度的项目，并且我使用了一些带有 jquery 的模态，但这不起作用，因为我希望它在我单击第一个组件中的第一个模态时它工作正常但是当我移动另一个组件时调用另一个模态，它同时显示旧的和新的

更多细节 ：

第一个模态到第一个组件

当我去找另一个组件并调用另一个模态时

如果有人可以提供帮助，我将不胜感激！

第一个模态：

    <div class="ui modal nouveaux">
        <i class="close icon"></i>
        <div class="header">
            Affecter Nouveaux stage
        </div>
        <div>
        </div>
        <form class="ui form">
            <div class="two fields">
                <div class="field">
                    <label>Nom De Stage</label>
                    <input id="nom" type="text" placeholder="Nom de stage ..." [(ngModel)]="nomStage"
                           [ngModelOptions]="{standalone: true}">
                </div>
                <div class="field">
                    <label>Nom & prenom etudiant</label>
                    <select id="etudiant"  class="ui search dropdown" (click)="selectedhandler($event)">
                        <option disabled selected hidden>Choisir...</option>
                        <option *ngFor="let etudiant of listEtudiant" value="{{etudiant.cin}}">
                            {{etudiant.nom | titlecase}}
                            {{etudiant.prenom | titlecase}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="two fields">

                <div class="field">
                    <label>Nom & prenom enseignant </label>
                    <select id="enseignant" class="ui search dropdown" (click)="selectedhandlerEnseignant($event)">
                        <option disabled selected hidden value="choisir">Choisir...</option>
                        <option *ngFor="let enseignant of listEnseignant" value="{{enseignant.id_en}}">
                            {{enseignant.nom_en | titlecase}}
                            {{enseignant.prenom_en | titlecase}}
                        </option>
                    </select>

                </div>
                <div class="field">
                    <label>Service</label>
                    <select id="service" class="ui search dropdown" (click)="selectedhandlerService($event)">
                        <option disabled selected hidden>Choisir...</option>
                        <option *ngFor="let service of listService" [value]="service.id_service">
                            {{service.nom_service | titlecase}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>Date debut</label>
                    <input id="date_d" type="date" name="last-name" [(ngModel)]="date_d"
                           [ngModelOptions]="{standalone: true}">
                </div>
                <div class="field">
                    <label>Date fin</label>
                    <input id="date_f" type="date" name="last-name" [(ngModel)]="date_f"
                           [ngModelOptions]="{standalone: true}">
                </div>
            </div>

            <div class="two fields">
                <div class="field">
                    <label>Objectif</label>
                    <select name="skills[]" class="ui fluid multiple selection dropdown" id="multi-select">
                        <option selected hidden>Choisir...</option>
                        <option *ngFor="let objectif of listObjectif" [value]="objectif.id_obj">{{objectif.des_obj | titlecase}}
                        </option>
                    </select>
                </div>
            </div>
            <div *ngIf="nomStage?.length===0" id="span">
                <span class="ui red message">Nom de stage bligatoire</span>
            </div>
            <div *ngIf="etudiantcin?.toString().length===0" id="span">
                <span class="ui red message">Etudiant bligatoire</span>
            </div>
            <div *ngIf="enseignantid?.toString().length===0" id="span">
                <span class="ui red message">Enseignant bligatoire</span>
            </div>
            <div *ngIf="serviceid?.toString().length===0" id="span">
                <span class="ui red message">Service bligatoire</span>
            </div>
            <div *ngIf="date_d?.length===0" id="span">
                <span class="ui red message">Date debut bligatoire</span>
            </div>
            <div *ngIf="date_f?.length===0" id="span">
                <span class="ui red message">Date fin bligatoire</span>
            </div>
        </form>
        <div class="actions">
            <div class="ui black deny button" (click)="Annuler()">
                Annuler
            </div>

            <div class="ui positive right labeled icon button" (click)="insertStage(nomStage,date_d,date_f)"
                 *ngIf="date_f && date_d && selectedObjectif && serviceid && enseignantid && etudiantcin && nomStage">
                <i class="checkmark icon"></i>
                Ajouter
            </div>
        </div>
    </div>

这是我如何显示第一个模态的代码

showModal(): void {
    $('.ui.modal.nouveaux').modal('show');
    this.drop();
}

这是第二个模态

<div class="ui modal nouveaux">
    <i class="close icon"></i>
    <div class="header">
        Ajouter nouveaux classe
    </div>

    <form class="ui form">
        <div class="field">
            <label>Nom de classe</label>
            <input type="text" name="Nom_de_class" id="Nom_de_class" placeholder="Nom de service" class="form-control"
                        [(ngModel)]="nom_class" required minlength="2">
        </div>
        <div *ngIf="nom_class?.length === 0" id="span">
        <span  class="ui red message" >Nom de classe est obligatoire</span>
        </div>
        <div class="actions" (click)="cancel()">
        <div class="ui black deny button">
            Annuler
        </div>
        <div class="ui positive right labeled icon button" *ngIf="nom_class" (click)="insertClasse(nom_class)">
            <i class="checkmark icon"></i>
            Ajouter
        </div>
    </div>
    </form>
</div>

这就是我展示第二个模态的方式

showModal(): void {
        $('.ui.modal.nouveaux').modal('show');
    }

标签： jqueryangularcachingmodal-dialogsemantic-ui