Question

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

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

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

我已经破解了好几天了。过了一会儿，我放弃了模板驱动的表单，转而使用反应性表单，因为该游戏使我直接进入表单组。但是我找不到一种方法来设置（或获取）值的输入。最终，我尝试了一个自定义表单组件-认为我可以编写自己的绑定逻辑；但这也不可行，因为接口文档假定您的表单组件将只有一个html输入字段/元素。

我几乎没有主意了……外面有人知道使用两个输入字段的时间戳（或任何其他值）的工作示例吗？

Answer 1

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

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>

有关演示，请参见this stackblitz。请注意，一个更简单的选择是拥有两个不同的变量date和time，每个变量都绑定到一个元素，并定义一个timestamp getter属性以结合这两个部分。

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

1 个答案: