Angular中如何获取列内上下行值设置时间选择器范围限制

核心逻辑不要靠DOM查询找相邻行的时间值，直接以你渲染表格用的数据源数组为唯一可信源，通过行索引直接取相邻行的时间值即可，实现步骤如下： #

1. 先明确数据源结构 #

所有行的时间值统一存在组件类的数组里，每个元素对应一行的数据，示例：

// 组件TS文件内定义
timeRowList: Array<{ selectedTime: Date }> = [
  { selectedTime: new Date(0, 0, 0, 9, 0) },
  { selectedTime: new Date(0, 0, 0, 10, 0) },
  { selectedTime: new Date(0, 0, 0, 11, 0) },
  // 其他行数据...
];

2. 修正模板写法 #

你原来的代码有两个问题：一是input和[ngxTimepicker]之间缺少空格，Angular无法识别指令；二是所有行共用同一个minDate/maxDate变量和同一个时间选择器实例，肯定无法实现逐行的范围限制。
用*ngFor渲染行时必须拿到当前行索引，给每个时间选择器生成唯一标识，逐行绑定min/max规则：

<!-- 遍历行时声明索引i -->
<tr *ngFor="let row of timeRowList; let i = index">
  <td>
    <div class="time-range-example">
      <input
        [ngxTimepicker]="'picker_' + i"
        [min]="getRowMin(i)"
        [max]="getRowMax(i)"
        [value]="row.selectedTime | date:'HH:mm'"
        readonly
      >
      <!-- 每个时间选择器用唯一id匹配对应input -->
      <ngx-material-timepicker
        [id]="'picker_' + i"
        (timeSet)="onTimeSelected(i, $event)"
      ></ngx-material-timepicker>
    </div>
  </td>
</tr>

3. 组件内写对应逻辑方法 #

通过索引直接从数据源数组里取相邻行的时间值，同时在用户选完时间后同步更新数据源，保证规则实时生效：

// 获取当前行min值：同列下一行的时间
getRowMin(currentIndex: number): Date | null {
  const nextRow = this.timeRowList[currentIndex + 1];
  // 最后一行无下一行时返回null，即不做min限制，可按需自定义边界值
  return nextRow?.selectedTime ?? null;
}

// 获取当前行max值：同列上一行的时间
getRowMax(currentIndex: number): Date | null {
  const prevRow = this.timeRowList[currentIndex - 1];
  // 第一行无上一行时返回null，即不做max限制，可按需自定义边界值
  return prevRow?.selectedTime ?? null;
}

// 选中时间后更新数据源对应行的值
onTimeSelected(currentIndex: number, timeStr: string) {
  const [hours, minutes] = timeStr.split(':').map(Number);
  const updatedTime = new Date();
  updatedTime.setHours(hours, minutes, 0, 0);
  this.timeRowList[currentIndex].selectedTime = updatedTime;
}

注意事项 #

• 不要用@ViewChildren查询DOM节点再找相邻行的值，DOM渲染顺序可能受结构指令影响出错，直接从数据源数组取值是最稳定的方案
• 每个时间选择器必须有唯一标识，不能所有行共用同一个模板引用变量，否则会出现所有输入框绑定同一个选择器的问题
• 时间修改后必须同步回数据源，否则相邻行的min/max规则不会实时刷新

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