如何从一个divs列表中高亮显示2个选中的divs？

Question

我有一个时间槽的数组，我想高亮显示的是 起止时间.

我需要的是。当我第一次点击时，选定的div会被高亮显示，第二次点击时，另一个选定的div会被高亮显示。

我的代码是：在DIV形成中，时间被写入。

 <div *ngFor="let todayDate of dates">
   {{todayDate}}
   <div *ngFor="let time of ScheduleTime">
     <div *ngIf="todayDate == time.date">
       <div class="timeSlots" (click)='timeSelector(time)'>
         {{time.hours}}:{{time.minutes}}
       </div>
     </div>
   </div>
 </div>
 <br>
 <hr>
</div>

我的typeScript代码是：

timeSelector(event){
    console.log(event);
    if(this.st.sh==-1 && this.st.sm==-1 && this.et.eh == -1 && this.et.em==-1){
        this.st.sh = event.hours;
        this.st.sm = event.minutes;
        console.log("Start time is ->"+this.st.sh + ":"+this.st.sm);
    }
    else if(this.st.sh!=-1&&this.st.sm!=-1&&this.et.eh ==-1 &&this.et.em==-1){
        this.et.eh = event.hours;
        this.et.em = event.minutes;
        console.log("End time is ->"+this.et.eh +":"+this.et.em);
    }
    else if(this.st.sh!=-1 && this.st.sm!=-1 && this.et.eh!=-1 &&this.et.em!=-1){
        this.st.sh = event.hours;
        this.st.sm = event.minutes;
        this.et.eh = -1;
        this.et.em = -1;
        console.log("Start Time is ->" + this.st.sh + ":"+this.st.sm);
        console.log("End time is not defined yet");
    }


}

Answer 1

优雅 "的解决方案

如果您能够改变 ScheduleTime 然后你可以为activeStart-EndTimes添加标志。

你的时间对象就会像这样。

time {
  hours: 1,
  minutes: 1,
  date: new Date(),
  isStartDate: false,
  isEndDate: false
}

现在，当一个元素被选中时，你可以设置相应的标志。在你的模板中，你可以对那些设置了标志的时间进行格式化处理，比如说

<div *ngFor="let time of ScheduleTime">
  <div *ngIf="todayDate == time.date">
    <div class="timeSlots" [ngClass]="{'startClass': time.isStartDate, 'endClass': time.isEndDate}" (click)='timeSelector(time)'>
      {{time.hours}}:{{time.minutes}}
    </div>
  </div>
</div>

不那么优雅

你的组件中的startDate和endDate设置正确。在你的模板中，你可以检查每个项目是否与start-endDate相同，并相应地进行格式化。

这样做会消耗更多的资源，因为每当某些东西发生变化时，所有的日期都要重新解析，但如果你的模板中的 ScheduleTime 阵列比较小。

<div *ngFor="let time of ScheduleTime">
  <div *ngIf="todayDate == time.date">
    <div class="timeSlots" [ngClass]="{'startClass': time.hour == st.sh && time.minutes == st.sm, 'endClass': time.hour == et.eh && time.hour == et.em}" (click)='timeSelector(time)'>
      {{time.hours}}:{{time.minutes}}
    </div>
  </div>
</div>

一点建议

请不要调用你的变量。st, sh 等.我猜这是 startTime, startHour 等。

如果是这样，请给你的变量取相应的名字。这可能会在你的代码中占据更多的空间，但它会让你的代码更容易读懂！（如果你担心代码包的大小，有一些工具可以在之后对你的变量名进行最小化。(如果你担心代码包的大小，有一些工具可以在之后对你的变量名进行精简)

Answer 2

您的 timeSelector 函数需要将最新选定的时间元素的引用存储在这个循环可以访问它的位置（最好为循环传递一个唯一的标识符，即当前循环的索引在这里就足够了）。

一旦完成了这一点，你可以使用一个指令，如 ngClass 看看 clicked_index (或任何你保存为的东西)等于当前索引，如果为真，则输出高亮类。

Answer 3

一种方法是抓取你从ScheduleTime得到的时间对象的索引，并检查该索引是起始索引还是结束索引。在此基础上，你可以使用我在下面展示的 "ngClass "功能给出单独的类名，因此可以对初始和结束div进行不同的样式。

<div *ngFor="let time of ScheduleTime; let i = index">
    <div *ngIf="todayDate == time.date">
        <div [ngClass]="i == 0 || i == ScheduleTime.length-1 ? 'timeSlots' : 'specialTimeSlots'" (click)='timeSelector(time)'>{{time.hours}}:{{time.minutes}}</div>
    </div>
</div>

希望能帮到你