Angular Material 和输入类型“时间”、值属性与 ngModel

Question

我正在尝试将传入的日期对象拆分为 2 个单独的 mat-form-fields。

首先我创建 DatePicker 并给它正确的默认值：

<mat-form-field>
    <mat-label>Datum laden: </mat-label>
    <input matInput [matDatepicker]="loadPicker" placeholder="Choose a date" [(ngModel)]="data.mission.loadDate">
    <mat-datepicker-toggle matSuffix [for]="loadPicker"></mat-datepicker-toggle>
    <mat-datepicker #loadPicker></mat-datepicker>
</mat-form-field>

当我到达时间元素时，它变得有点棘手。 角材料似乎没有处理时间的方法。 这意味着我必须恢复到较旧的方法，只需为我的输入字段指定 type="time"。 在视觉上它有效，给它一个值但是在使用 value 属性时似乎不起作用。

有人可以向我解释为什么使用 ngModel 有效但另一种方法无效吗？

工作版本：

<mat-form-field>
    <mat-label>Tijd laden: </mat-label>
    <input matInput type="time" [(ngModel)]="test">
</mat-form-field>

测试是：

test = `${this.mission.loadDate.getHours()}:${this.mission.loadDate.getMinutes()}`;

非工作版本：

<mat-form-field>
            <mat-label>Tijd laden: </mat-label>
            <input matInput type="time" value=`${data.mission.loadDate.getHours()}:${data.mission.loadDate.getMinutes()}`>
</mat-form-field>

考虑到 type="time" 是由浏览器处理的。 我认为这两种方法都应该有效。

Answer 1

实际上value是一个 HTML 属性，为了与 HTML 属性绑定，您需要使用表达式绑定。 而[value]是不需要表达式绑定的 DOM 属性，另一方面，您不需要使用 getHours 和 getMinutes。 您可以使用 angular 提供的日期过滤器。 看看这个例子