在Angular材质日历表中再添加一行

Question

我想在Angular日历的每个表上追加一行。

这里是Stackblitz link。

我知道在jQuery中我们可以使用附加功能，但是我不确定在Angular Material日历的情况下该怎么做。

Answer 1

在HTML文件中的<br>标记后添加<mat-calendar>。

<div *ngFor="let m of months">
<mat-calendar [dateClass]="dateClass()" [startAt]="m" [selected]="selectedDate" 
(selectedChange)="onSelect($event)"></mat-calendar>
<br>
</div>

Answer 2

您可以为此使用普通的DOM函数：

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

ngAfterViewInit() {
  this.calendars.forEach(calendarEl => {
    const tbody: HTMLElement = calendarEl.nativeElement.querySelector('tbody');
    const tr = document.createElement('tr');
    for (let i = 0; i < 7; i++) {
      tr.appendChild(document.createElement('td'));
    }
    tbody.appendChild(tr);
  })
}

如果日历表的最后一行没有7列，则需要添加内容并进行调整。