javascript - Angular Dom：- 将缺失的单元格（td）添加到 Angular 材质日历

Question

我正在尝试在角度材料日历中添加缺失的单元格。下面是我的html

<mat-calendar
    [dateClass]="dateClass()"
    [startAt]="month"
    [selected]="selectedDate"
    (selectedChange)="onSelect($event)">
  </mat-calendar>

我使用 ViewChildern 访问它的 dom

@ViewChildren(MatCalendar, { read: ElementRef }) calendars: QueryList<ElementRef>;

我能够在角度材料日历的底部添加空的额外行

 this.calendars.forEach(calendarEl => {
          const tbody: HTMLElement = calendarEl.nativeElement.querySelector('tbody');

   //ToDO:-- identify last row, count number of cells in last row,if its less than 7  add missing cells

//Added extra row to the bottom

const tr = (document.createElement('tr') as HTMLTableRowElement);
          tr.className = 'date-class';
          for (let i = 0; i < 7; i++) {
            tr.appendChild(document.createElement('td'));
          }
          tbody.appendChild(tr);
        });

这是我没有添加缺失单元格（td）的日历图像。需要再添加 4 个单元格

标签： javascriptangularangular-material

Answer 1

我们可以做一些事情，比如获取最后一行并将追加数量添加到该行，以便孩子<td>的总数变为 7。<td>

let lastRow = calendarEl.nativeElement.querySelector('tbody tr:last-child');
let  vaccantColCount = 7 - lastRow.querySelectorAll('td').length;
console.log(vaccantColCount);
while(vaccantColCount > 0) {
    lastRow.appendChild(document.createElement('td'));
    vaccantColCount--;
}