Angular4表单中多个ngb-timepicker独立实例化问题求助

嘿，我懂你遇到的这个问题——这其实是JavaScript对象引用的典型“坑”！

问题根源 #

如果你的time1和time2指向了同一个NgbTimeStruct实例（比如直接把同一个对象赋值给两个变量），那不管操作哪个时间选择器，两个组件都会显示相同的值。因为对象是引用类型，两个变量共享同一块内存地址的内容，改一个等于同时改了另一个。

解决方案：创建独立的实例 #

你只需要在组件类里为两个时间选择器分别初始化完全独立的NgbTimeStruct对象，就能让它们各自独立工作了。

组件类代码示例

import { Component } from '@angular/core';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-time-form',
  templateUrl: './time-form.component.html'
})
export class TimeFormComponent {
  // 为开始时间和结束时间分别创建独立的时间对象实例
  time1: NgbTimeStruct = { hour: 9, minute: 0, second: 0 };
  time2: NgbTimeStruct = { hour: 17, minute: 0, second: 0 };

  // 如果需要动态设置初始值，也要保证是独立对象
  resetTimes() {
    this.time1 = { hour: 8, minute: 30, second: 0 };
    this.time2 = { hour: 18, minute: 0, second: 0 };
  }
}

HTML模板代码示例

<form>
  <div class="form-group">
    <label>开始时间</label>
    <ngb-timepicker [(ngModel)]="time1" name="startTime"></ngb-timepicker>
  </div>
  <div class="form-group">
    <label>结束时间</label>
    <ngb-timepicker [(ngModel)]="time2" name="endTime"></ngb-timepicker>
  </div>
</form>

避坑提醒 #

千万别像下面这样写（错误示例）：

// ❌ 错误：两个变量指向同一个对象
const defaultTime = { hour: 9, minute: 0, second: 0 };
this.time1 = defaultTime;
this.time2 = defaultTime;

这种写法会让time1和time2共享同一个对象实例，必然导致你遇到的同步问题。

另外记得给每个ngb-timepicker设置唯一的name属性，ngModel需要靠它来区分不同的表单控件，这也是避免冲突的小细节。

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