Question

我正在正确显示我的嵌套for循环但是在突出显示嵌套数组中单个选定的li元素时遇到了问题，所以不希望的结果是该行中的所有内容都根据我的数字突出显示。

 <div class="nopadding week" style="width: 12%;" *ngFor="let day of Schedule; let j = index">
      <ul class="nopadding">
          <div *ngFor="let hour of day.hours; let i = index" class="hours">
            <li class="hour" [ngClass]="{watched: hour.assignments.length> 0, unassigned: hour.assignments.length <= 0}" (click)="selectedtimeslot(hour.assignments, i)" [class.active]="i == selectedRow">
              {{hour.assignments.length}}
            </li>
          </div>
        </div>
      </ul>
    </div>

在我的组件中，我有一个设置所选行的值的函数。

selectedtimeslot(item: any, index:any) {
    this.selectedRow = index;
    this.highlightGuardian.changeNav(item);
}

SCSS

li.active {
   background-color:#123456 !important;
   color: white;
}

我想我知道我的问题是我给了[class.active]有关父母索引的任何信息，以便正确地突出显示所选元素

Answer 1

你的问题是正确的，你没有给它任何父信息，所以它突出显示了每个父母的选定索引。

不是让你的selectedRow等于一个数字，而是让它成为一个小时，然后像小时一样发送它。

      <div *ngFor="let hour of day.hours; let i = index" class="hours">
        <li class="hour" [ngClass]="{watched: hour.assignments.length> 0, unassigned: hour.assignments.length <= 0}" (click)="selectedtimeslot(hour.assignments, hour)" [class.active]="hour == selectedRow">
          {{hour.assignments.length}}
        </li>
      </div>

这将确保它只匹配单个div，因为它将进行对象比较，而不是索引比较。

突出显示Angular2中嵌套的ngFor元素的[class.active]

1 个答案: