带有/动态内容的 Ionic 3 <ion-segment> 不会显示选定的 CSS 类答案

【问题标题】：Ionic3 <ion-segment> w/dynamic content won't show selected CSS class带有/动态内容的 Ionic 3 <ion-segment> 不会显示选定的 CSS 类
【发布时间】：2017-09-06 07:29:40
【问题描述】：

我正在使用 Angular 4 Reactive Forms、“Ionic(3) 原生”UI 组件和来自各种“nested reactive forms" blogs/tutorials”的技术来创建一个动态的、多部分的数据输入应用程序。

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

第一次效果很好，但是如果ion-segment 更改其按钮数量或其标签值（如果 2 个选项碰巧具有相同的选项，段按钮仍然可以正常工作）。

示例：最初的 3 个选项集具有“成人和“未知”...

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

“Calf”只会变亮/禁用，而不是“Active”。这是我需要解决的问题。

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

对于 Ionic 样式和 CSS 类，在对 @Input 按钮选项数组的后续更改中，基本上一切似乎都可以工作除了。

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

【问题讨论】：

我认为我明白你在问什么，但你能添加一些代码吗？很难提供这样的解决方案:-)
嗨@David - 是的，我最初发帖时是凌晨 1:30 :) 添加了代码和一些屏幕截图。可能是关于 Ionic 或 Angular 的一些非常简单的事情，我只是不知道我需要做什么来刷新视图的内容。也不太熟悉。
谢谢，代码太多了！所以我对此的最佳猜测是 Angulars 更改检测在这里玩了你的把戏。根据您的说法，模型已更新，但视图未更新 - Angular 似乎没有根据您的更改更新 DOM 树。幸运的是，我们可以使用 ChangeDetectorRef (angular.io/api/core/ChangeDetectorRef) 做到这一点。将其注入您的构造函数中，并在您进行更改后使用.detectChanges() 方法手动运行更改检测，该更改应由视图反映！
谢谢 - 我之前看过 ChangeDetectionStrategy 和 ChangeDetectorRef 但似乎没有任何效果。刚刚在ngOnChanges()、OnInit 和.subscribe() 闭包中注入并尝试了this.ref.detectChanges()、this.ref.markForCheck() 和this.ref.reattach() formControls。没有工作。 CDStrategy 是“默认”。使用this.ref.detach() 做到了，所以我根本无法选择任何东西，所以这产生了效果，但方向错误:) 现在同样的问题与另一个组件更新数据，但 UI 没有。我应该在何时/何地使用 Ionic 组件更新 DOM？谢谢！
通常你有一个离子组件的类级 ng-model 并且每次新数据到达（在你的情况下通过@Input）你更新这个模型。在您的情况下，合适的位置将是 ngOnChanges，因为此生命周期挂钩始终在 @Input 参数更改时运行。

标签： ionic3 ionic-native angular4-forms

【解决方案1】：

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

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

片段中的按钮数或
他们的价值观...

结果是它出现好像您无法选择更新的段按钮...

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

如果您更新的细分数据源具有相同的值和按钮数量，则没问题。但是，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');
}

它很丑而且很老套，但它完成了工作，我没有更多时间让它花哨......

【讨论】：