时间戳

首页 > 解决方案 > Angular 5 - 将两个字段绑定到单个实例变量

javascript - Angular 5 - 将两个字段绑定到单个实例变量

问题描述

对于初学者，我使用的是 Angular 版本 5.2.11

在我的组件中，我将时间戳存储为字符串实例变量。

我需要将该字符串绑定到最终用户更新的表单。通常我会创建一个模板驱动的表单来更新字符串；但在这种情况下，我需要将时间戳的日期部分作为文本输入字段显示在表单 UI 中，并将时间戳的时间部分作为选项选择字段显示在表单 UI 中（使用离散集可供选择的可用时间值）。

这几天我一直在研究这个。过了一段时间，我放弃了模板驱动的表单，转而使用响应式表单，因为那场比赛我直接访问了表单组；但我找不到输入设置（或获取）值的方法。最终我尝试了一个自定义表单组件——认为我可以编写自己的绑定逻辑；但这也行不通，因为界面文档假定您的表单组件将只有一个 html 输入字段/元素。

我几乎没有想法......有没有人知道使用两个输入字段的时间戳（或任何其他值）的任何工作示例？

标签： javascriptangulartypescriptdatetime

解决方案

您可以定义两个 getter/setter 属性，一个用于时间戳变量的每个部分：

private timestamp: string;

public get datePart(): string {
  // Extract the date part of this.timestamp
  return ...
}
public set datePart(value: string) {
  // Set the date part of this.timestamp
  ...
}

public get timePart(): string {
  // Extract the time part of this.timestamp
  return ... 
}
public set timePart(value: string) {
  // Set the time part of this.timestamp
  ...
}

在模板中，您可以将每个属性绑定到一个 HTML 元素：

<input type="text" name="date" [(ngModel)]="datePart" />

<select name="time" [(ngModel)]="timePart" >
  ...
</select>

请参阅此 stackblitz以获取演示。请注意，更简单的替代方法是拥有两个不同的变量date和time，每个变量都绑定到一个元素，并定义一个timestampgetter 属性来组合这两个部分。

推荐阅读