从角度合并具有相同值的div

Question

我正在尝试制作自己的日历

https://stackblitz.com/edit/angular-1kfbod?file=src/app/app.component.css

这是我组件的完整示例。 如何合并具有相同值{{day.weekNumber}}的周div（在下面的示例中为1 div而不是4）？

Answer 1

在这种情况下，您应该为周号使用单独的数组。

打字稿

 public weekNumbers: number[] = [];
 public rowWidth: any = 100 + '%';
 ngOnInit() {
    ...
    ...  // your existing code
    ...
    let weeks = [];
    for (let i = 1; i <= this.numberOfDaysCurrentMonth; i++) {
      this.daysToDisplayInCurrentMonth[i - 1] = new Date(this.currentYear, this.currentMonth - 1, i).getDay();
      const day = {
        number: i,
        weekDay: new Date(this.currentYear, this.currentMonth - 1, i).getDay(),
        name: this.dayNames[this.daysToDisplayInCurrentMonth[i - 1]],
        weekNumber: this.getWeekNumber(new Date(this.currentYear, this.currentMonth - 1, i))
      };

      weeks.push(day.weekNumber);
      this.days.push(day); 
    }

    this.weekNumbers = [];
    weeks.forEach((ele) => {
      if(this.weekNumbers.indexOf(ele) < 0) {
        this.weekNumbers.push(ele);
      }
    });
    this.rowWidth = (100/this.weekNumbers.length) + '%';
}

HTML

    <div class="row-calendar">
        <div class="week-number" [style.width]="rowWidth" *ngFor="let week of weekNumbers">
            <label class="number-label"><span>{{week}} </span></label>
        </div>
    </div>