Angular Material 内联日历选择器 'selected' 属性 绑定不起作用

Question

我正在使用 属性 和事件绑定到 angular material 日历中的 selected 属性，就像在文档中一样：

<mat-card>
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
<code>{{ selected }}</code>

export class AppComponent implements OnInit, AfterViewInit {
  selected = new Date(1999, 1, 1);

  ngOnInit() {
    this.selected = new Date(1999, 2, 2);
  }

  ngAfterViewInit(): void {
    this.selected = new Date(1999, 3, 3);
  }
}

问题是日历没有根据设置的日期调整它的视图。

Stackblitz demo here.

我错过了什么？

Answer 1

您缺少的是 [startAt] 输入的用法。

当我们想要以默认值启动日历时，我们需要将其作为 startAt 传递。

因此，对于您的情况，您可以通过添加

进行快速检查

<mat-calendar [(selected)]="selected" [startAt]="selected"></mat-calendar>

这些应该是单独的变量，因此如果适合您，请在检查后更改它们。