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

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

腳本

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，因為它將進行對象比較，而不是索引比較。