如何在li中设置默认值以及如何从角度6中的点击事件更新li

我的一个分量中有2 li。我正在使用一种方法来绑定第一李和第二李。 情况1)在这种方法中,我有4个学生详细信息。因此,在第一李中,我想显示第一学生详细信息0索引[0],数据按相同的顺序[3,2,1,0],在第二李中,我想显示所有学生的数据。

情况2)当我单击第二个li中的任何学生时,我想将这些学生数据显示到第一个li中。

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

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

我的HTML代码

李1码

<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];    
  }

请帮助我一些解决方法。

peak288 回答:如何在li中设置默认值以及如何从角度6中的点击事件更新li

我建议您更改实现以与Reactive Forms一起使用,并为<li>使用FormArry。 使用反应式表单,您可以设置默认值并更改ts文件中FormArray中的任何值。

,

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

相反,您可以显示selectedStudent中的值,该值给出当前选定的学生对象。

因此最初在selectedStudent中将第一个元素设置为ngOnInit()。 然后使用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>
,

大家好,我创建了一个新方法

override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            self.navigationController?.setNavigationBarHidden(true,animated: animated)

并将此方法绑定到第一个LI中。我的问题解决了。


let controller = UIHostingController(rootView:view())
本文链接:https://www.f2er.com/3168919.html

大家都在问