我正在尝试在角形材质日历中添加缺少的单元格。
下面是我的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个单元格
javascript - Angular Dom:-将缺少的像元(td)添加到有 Angular Material 日历中-LMLPHP

最佳答案

我们是否可以做类似获取最后一行并将<td>附加编号添加到该行的操作,以使<td>子代的总数变为7。

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


javascript - Angular Dom:-将缺少的像元(td)添加到有 Angular Material 日历中-LMLPHP

09-25 16:45
查看更多