J'ai 2 li dans mon composant. J'utilise une seule méthode pour lier le 1er Li et 2nd Li. Cas 1) Dans cette méthode, j'ai 4 détails de l'étudiant. Donc, dans la 1ère li, je veux montrer le 1er days d'étudiant Détails0 Index [0] Les données sont dans la même séquence [3,2,1,0] et dans la 2e Li, je souhaite montrer toutes les données des élèves.
cas 2) Quand je clique sur un étudiant en 2e li, je veux montrer ces données d'étudiant dans le 1er Li. P>
ci-dessous est mon code
mon code de fichier TS: - p> mon code HTML p> li 1st code p> i Créez une nouvelle méthode pour remplir le 1er LI P> public get singleStudent(): Student {
return this._dashboardService.account.students[0];
}
3 Réponses :
Je vous recommande de modifier la mise en œuvre, pour une utilisation avec des formulaires réactifs et d'utiliser le formarrry pour le
Pouvez-vous m'expliquer avec l'exemple /
Ici, c'est parce que au lieu de cela, vous pouvez afficher des valeurs à partir de SE SE INSTALLÉE SE PREMIER ELEMENT AS obtenez SingLestudent () retourne toujours le premier élément du tableau. SelectedStudent qui donne à l'objet étudiant sélectionné actuel. SOCIÉTUDENT Dans < Code> Ngoninit () .
et utilisez alors sélectionnéeStudent comme ci-dessous
Salut tout je crée une nouvelle méthode et lier cette méthode dans le 1er Li. Mon problème est résolu. P> <div class="studentmenu-2-0">
<ul class="nav align-items-center justify-content-md-start justify-content-between" *ngIf="account && students">
<li class="col-9 col-xl-auto col-lg-10 col-md-9">
<div class="{{singleStudent==selectedStudent && highlightStudent?'hoveffect':''}}">
<div class="student_info">
<div class="media">
<span class="d-inline student-photo mr-1"><a (click)="setStudent(singleStudent)"><img [src]="singleStudent.imageUrl ? getStudentFaceImage(singleStudent.imageUrl):tempDpImage" /></a></span>
<div class="media-body align-self-center">
<span class="d-inline student-name mr-1"><a (click)="setStudent(stud)"><span>{{singleStudent.firstName}}</span>,</a></span>
<span class="d-inline student-class mr-1">{{singleStudent.className}} - {{ singleStudent.sectionName}},</span>
<span class="d-inline student-school mr-1">{{singleStudent.schoolName}}</span>
<span class="d-inline student-school mr-1">{{singleStudent.schoolId}}</span>
<span class="d-inline student-photos" *ngIf="!isHeartsOnly"><i>({{(selectedStudent.photos && selectedStudent.photos.list)?selectedStudent.photos.list.length:0}} photos)</i></span>
</div>
</div>
</div>
</div>
</li>
<li class="col-3 col-md-auto ml-md-2">
<div class="hovlink">
<a (click)="AddNewKidPopup()" class="playBut"><span class="d-inline" style="position: relative;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7" xml:space="preserve"><circle class="circle" id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"></circle> </svg><img src="//res.cloudinary.com/klassaktcontent/image/upload/v1534852393/klassakt/svg/plus.svg" /></span><span class="add-image-text">Add kids</span></a>
</div>
</li>
</ul>
</div>
Afficher le code complet ou créer un Stackblitz, voici quelques méthodes
etvariables ne sont pas correctement comprises. CommesetsingLestudent (goujon) ,setStudent (goujon) etc.@Ankitprajapati mer merci de répondre. Voir que j'ai ajouté une autre méthode de cette métho, je peux obtenir des détails d'un seul élève. Maintenant, mon changement est que lorsque je clique sur un étudiant à partir de 2e Li Les mêmes données seront affichées dans le 1er Li.
Toujours ce que vous avez ajouté
setsingLestudent etSETStudent n'est pas clair, veuillez créer un exemple de code Stackblitz et partager le lien@ @Ankitprajapati setsingSingDeleudente Cette méthode est définie sur des données d'élève unique.