Angular中如何拆分ngx-timepicker-field的时间值为时分数组？

首先要明确ngx-timepicker-field组件通过表单控件返回的值类型——它默认返回的不是纯字符串，而是组件封装的TimepickerValue类型对象，直接用字符串拆分自然无效。下面是两种可靠的实现方案：

方式一：直接读取时间对象的时分属性（推荐） #

表单控件的返回值本身就包含hours和minutes属性，直接提取即可得到目标数组：

// 假设你的表单组名为formGroup
const timeValue = this.formGroup.get('start_time')?.value;
if (timeValue) {
  const timeArray = [timeValue.hours, timeValue.minutes];
  // 此时timeArray即为[12, 34]格式，可直接存储
}

方式二：转为标准字符串后拆分（兼容特殊场景） #

如果需要先转为HH:mm格式字符串再拆分，可先从时间对象中拼接出字符串，再处理：

const timeValue = this.formGroup.get('start_time')?.value;
if (timeValue) {
  // 拼接为标准时间字符串
  const timeStr = `${String(timeValue.hours).padStart(2, '0')}:${String(timeValue.minutes).padStart(2, '0')}`;
  // 拆分并转为数字数组
  const timeArray = timeStr.split(':').map(Number);
}

额外优化：自动监听值变化转换 #

如果需要在用户输入时自动同步数组，可通过表单控件的valueChanges监听：

this.formGroup.get('start_time')?.valueChanges.subscribe(timeValue => {
  if (timeValue) {
    this.storedTimeArray = [timeValue.hours, timeValue.minutes];
  }
});

注意：不要直接尝试拆分表单控件的原始值，因为它不是简单的字符串，必须先读取其内部的hours和minutes属性。

内容的提问来源于stack exchange，提问作者Rezvaneh Aftabgard