如何设置li中的默认值并从角度6中的单击事件更新li

Question

我的一个组件中有2个li。我使用一个单一的方法来绑定第一个li和第二个li。案例1(在这个方法中，我有4个学生的详细信息。因此，在第一个li中，我想显示第一个学生的详细信息0索引[0]，数据按相同的顺序[3,2,1,0]，在第二个li中我想显示所有学生的数据。

情况2(当我点击第二里的任何学生时，我想将这些学生数据显示到第一里。

下面是我的代码我的ts文件代码：-

public get selectedStudent(): Student {
return this._dashboardService.selectedStudent;
}

我的Html代码

李一码

<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>         
</ul>
</div>
LI 2nd code 
<div class="col-12">
<div id="collapseBasic" [collapse]="isCollapsed">
<perfect-scrollbar class="scrollbar-div" [config]="config">
<li *ngFor="let stud of students">
<div class="{{stud==selectedStudent && highlightStudent?'hoveffect':''}}">
<div class="hovlink">
<a (click)="setSingleStudent(stud)"><img [src]="stud.imageUrl ? getStudentFaceImage(stud.imageUrl):tempDpImage" /> 
</div>                        
</div>
</li>
</perfect-scrollbar>
</div>
</div>

我创建了一个新方法来填充第一个LI

public get singleStudent(): Student {
return this._dashboardService.account.students[0];    
}

请帮我一些有解决方案的。

Answer 1

我建议您更改实现，以便与Reactive Forms一起使用，并对<li>使用FormArry。使用Reactive Forms，您可以设置默认值并更改ts文件中FormArray中的任何值。

Answer 2

这里的问题是因为get singleStudent()总是返回数组的第一个元素。

相反，您可以显示selectedStudent中的值，该值提供当前选定的学生对象。

所以最初在CCD_ 5中将第一元素设置为CCD_。然后使用selectedStudent作为

<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(selectedStudent)"><img [src]="selectedStudent.imageUrl ? getStudentFaceImage(selectedStudent.imageUrl):tempDpImage" /></a></span>
<div class="media-body align-self-center">
<span class="d-inline student-name mr-1"><a (click)="setStudent(stud)"><span>{{selectedStudent.firstName}}</span>,</a></span>
<span class="d-inline student-class mr-1">{{selectedStudent.className}} - {{ selectedStudent.sectionName}},</span>
<span class="d-inline student-school mr-1">{{selectedStudent.schoolName}}</span>
<span class="d-inline student-school mr-1">{{selectedStudent.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>         
</ul>
</div>

Answer 3

Hi All我创建了一个新方法

public get singleStudent(): Student {
var studentId = this._dashboardService.selectedStudent.userID;
for (let i in this._dashboardService.account.students) {
if (this._dashboardService.account.students[i].userID == studentId)
return this._dashboardService.account.students[i]
}
}

并在1st LI中绑定此方法。我的问题得到了解决。

<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>