angular - ionic 日期时间选择器动态更新列

Question

我有以下要求，目的是寻找一些类似的东西。
时间选择用户选择小时和分钟的地方。
提供者的时间可以是任何(1、5、6、13、19)等。
每个小时都有自己的分钟
这样的数据结构

[ 
  { 
    hour: 1,
    minutes: [0, 15, 30],
  },
  {
    hour: 4,
    minutes: [15, 25, 40],
  },
]

当用户选择小时，分钟选择将根据结构变化。
知道是否实现了此或类似的某些内容以便我可以使用它吗？

Answer 1

“官方”的答案是:不，在当前版本的 Ionic (4/5) 中这是不可能的。不可能的原因是因为ion-datetime当列更改时，组件不会发出事件(仅当用户单击“完成”或“取消”时)。
请注意这里有一个 Github issue对于随后包含在 bigger Github issue 中的更改这包括许多应该修复/添加到 ion-datetime 的内容。选择器。
另请注意this comment中提到的Ionic团队成员他们正在对 ion-datetime 进行彻底检修组件作为 Ionic Framework 下一个主要版本的一部分，所以这可能很快就会可用。

话虽如此，在 this PR全新 ionPickerColChange事件已添加到日期时间选择器组件 但它在外部不可用 (它不是由组件发出，仅在内部处理)。
但是，由于日期时间选择器组件并未隐藏在 Shadow DOM 后面，我们可以使用一些 javascript 代码作为解决方法来监听列中的更改并更新可用选项。
请记住，以下演示只是一种解决方法，因此它可能随时停止工作并可能出现一些意外问题/错误 .
请看看这个 working Stackblitz demo :

代码应该是不言自明的，但其中最重要的部分是 handlePickerOpen()获取 ion-picker-column 的方法元素并添加一个监听器来处理用户更改小时/分钟列时发生的情况:

public handlePickerOpen(): void {
    // Keep the current value so we can rollback the change
    // if the user clicks "cancel"
    this.selectedDateTime = this.latestSelectedDateTime;

    // Wait for the picker to be rendered so that we can
    // get its columns
    setTimeout(() => {
      try {
        const pickerCols = document.querySelectorAll("ion-picker-column");

        const hourCol = pickerCols[0];
        const minuteCol = pickerCols[1];

        hourCol.addEventListener(
          "ionPickerColChange",
          event => { this.handleColumnChange(event); },
          false
        );

        minuteCol.addEventListener(
          "ionPickerColChange",
          event => { this.handleColumnChange(event); },
          false
        );
      } catch (e) {
        console.error(e);
      }
    }, 400);
  }