0

我正在使用 Angular 4 Reactive Forms、“Ionic(3) native”UI 组件和来自各种“嵌套响应式表单”博客/教程的技术来创建一个动态的、多部分的数据输入应用程序。

我想要一个可重用的分段控件组件，它包含一个标题和一组选项（基于下拉选择），因此我不必创建多个几乎相同的子表单组件。

第一次一切正常，但如果更改其按钮数量或其标签值，则在随后的选择后似乎会中断（如果 2 个选择碰巧具有相同的选项，则段按钮仍然可以正常工作）。ion-segment

示例：最初的 3 个选项集具有“成人和“未知”... 在此处输入图像描述

更改下拉列表和传入的段选项数组后，仍然可以选择常用选项，但我无法将“calf”或“yearling”设置为 Active（尽管在组件代​​码和 formGroup 模型中确实设置了）。如果我首先选择“山羊”，它只有一个“未知”选项，那是我唯一可以选择的。

在此处输入图像描述

“小牛”只会变亮/禁用，而不是“活跃”。这是我需要解决的问题。

它正确更新以显示具有正确标签的正确数量的按钮，并且即使它看起来损坏，它也会正确更新 formGroup 模型，但“活动”状态仅适用于第一个选择。我尝试使用(click)and ( ionSelect) 来调用按钮上的方法，但没有区别。

基本上，除了@InputIonic 样式和 CSS 类对按钮选项数组的 后续更改之外，一切似乎都有效。

我的问题：我在哪里/如何告诉 Ionic<ion-segment>只使用最新的值和段数？教程或 Ionic 文档中的示例使用带有数据绑定的静态列表和模板驱动的表单[(ngModel)]，我不能使用反应式表单。这仅适用于模板驱动的表单吗？

4

1 回答 1

2

因此，在浪费了太多时间之后，结果证明 Ionic 如何将 CSS 类应用于使用结构指令的组件是一个问题……生命周期或 ChangeDetection 方法都不起作用，因为它已经是最新的了！咕噜……

供将来参考：如果您使用 *ngFor 或 *ngIf 结构指令来生成<ion-segment-button>元素，并且您更改：

  1. 段中的按钮数量或
  2. 他们的价值观...

结果是看起来好像您无法选择更新的段按钮...

但是您可以 - 除了将segment-activatedCSS 类应用于所选按钮并将其从所有其他按钮中删除之外，一切都可以正常工作。

如果您更新的细分数据源具有相同的值和按钮数量，那么没问题。但是，segment-activated该类不会应用于任何具有比以前更高的索引或不同值的按钮。

我终于拼凑出这种丑陋的方法来解决问题，因为我已经在它上面浪费了很多时间，所以它必须这样做......

<ion-segment formArrayName="segmentArray">
    <ion-segment-button *ngFor="let option of options; let i=index;" [value]="i" (tap)="setOption(i, $event)">{{option}}</ion-segment-button>
</ion-segment>

public setOption(index, event) {
    if (this.options[index] != null) {
      this.selectedSegment = this.options[index]; 

      //note you have to use "tap" or "click" - if you bind to "ionSelected" you don't get the "target" property
      let segments = event.target.parentNode.children;
      let len = segments.length;
      for (let i=0; i < len; i++) {
        segments[i].classList.remove('segment-activated');
      }
      event.target.classList.add('segment-activated');
}

这很丑陋和 ol'skool，但它完成了工作，我没有更多时间让它花哨......

于 2017-09-07T00:59:22.347 回答