时间戳

首页 > 解决方案 > 如何在 li 中设置默认值并从角度 6 中的单击事件更新 li

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

问题描述

我的一个组件中有 2 li。我正在使用一种方法来绑定 1st li 和 2nd li。案例 1）在这种方法中，我有 4 个学生的详细信息。所以在第 1 里，我想显示第 1 个学生 details0 索引 [0] 数据是相同的序列 [3,2,1,0]，在第 2 里，我想显示所有学生数据。

案例 2）当我点击 2nd li 中的任何学生时，我想将这些学生数据显示到 1st Li 中。

下面是我的代码我的 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];    
  }

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

标签： angular

解决方案

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

推荐阅读