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

【问题标题】：Add one more row to the table of Angular material calendar在 Angular 材质日历表中再添加一行
【发布时间】：2019-11-18 20:00:57
【问题描述】：

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

这里是Stackblitz link。

我知道在 jQuery 中我们可以使用附加功能，但我不确定在 Angular Material 日历的情况下如何做到这一点。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以为此使用普通的 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 列，则需要添加内容并进行调整。

【讨论】：

小心更新 stackblitz，这段代码看起来不错，但在我的本地没有做任何事情

【解决方案2】：

在您的 html 文件中添加 <br>after <mat-calendar> 标记。

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

【讨论】：

我在表格中有 n 行单元格。我需要再追加一行。这适用于间距
我的错，我可能有轻微的误解，你能告诉我你指的是什么表吗？我有你的 stackblitz 示例，但我没有看到任何表格。您是否试图实现动态追加行？
是的，排日期日历表