使用 matDatepicker 的角度动态列表答案

【问题标题】：Angular dynamic list with matDatepicker使用 matDatepicker 的角度动态列表
【发布时间】：2020-11-27 18:37:59
【问题描述】：

我正在尝试加载一个列表，其中我已经有数据，但是 matDatepicker 将是动态的，用户将填写以保存到银行。

<mat-list cols="3" rowHeight="2:1" *ngFor="let phase of budget.phases; let i = index">

    <h3 mat-subheader>
        {{ i + 1 }}. {{ phase.name }}
    </h3>

    <input matInput [matDatepicker]="phase.dateStart" placeholder="{{ 'fields.plannedStart' | translate }}"
        (focus)="dateStart.open()"
        (click)="dateStart.open()" readonly />
    <mat-datepicker-toggle matSuffix [for]="dateStart"></mat-datepicker-toggle>
    <mat-datepicker #dateStart></mat-datepicker>

    <input matInput [matDatepicker]="phase.dateEnd" placeholder="{{ 'fields.expectedDelivery' | translate }}"
        (focus)="dateEnd.open()"
        (click)="dateEnd.open()" readonly />
    <mat-datepicker-toggle matSuffix [for]="dateEnd"></mat-datepicker-toggle>
    <mat-datepicker #dateEnd></mat-datepicker>

</mat-list>

只是因为是列表所以返回错误，因为重复了dateStart和dateEnd，如何解决，才不会返回错误。

我尝试了类似的方法：

 <input matInput [matDatepicker]="phase.dateStart" placeholder="{{ 'fields.plannedStart' | translate }}"
        (focus)="dateStart_i.open()"
        (click)="dateStart_i.open()" readonly />
    <mat-datepicker-toggle matSuffix [for]="dateStart_i"></mat-datepicker-toggle>
    <mat-datepicker #dateStart_i></mat-datepicker>

错误错误：试图打开没有关联输入的 MatDatepicker。

【问题讨论】：

标签： angular typescript

【解决方案1】：

您无法创建动态模板变量名称，就像您尝试使用 #dateStart_i 您不必，因为 ngFor 中的每个项目都将与其他的，因为它会在它自己的实例中为 ngFor 使用的模板。我认为你的问题是：

<input matInput [matDatepicker]="phase.dateStart" placeholder="{{ 'fields.plannedStart' | translate }}"
        (focus)="dateStart_i.open()"
        (click)="dateStart_i.open()" readonly />

matDatepicker 指令应该接受 datepicker 模板变量，该变量应该引用 mat-datepicker 元素而不是 phase.dateStart。如果您在 mat-datepicker 组件上的模板中有 #dateStart 和 #dateEnd，您的开始日期输入应如下所示：

<input matInput [matDatepicker]="dateStart" ... />

同样，但使用 dateEnd 模板变量作为结束日期输入。

查看日期选择器demos。

第一个示例准确显示了应该如何使用 matDatepicker 指令：

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

【讨论】：