Ionic3 <ion-segment> w/dynamic 内容不会显示所选内容 CSS class

Question

我正在使用 Angular 4 种响应式表单，其中包含 "Ionic(3) native" UI 组件，以及来自各种“nested reactive forms" blogs/tutorials 的技术来创建动态，multi-section 数据输入应用程序

我想要一个可重复使用的分段控件组件，它包含一个标题和一组选项（基于下拉选择），这样我就不必创建多个几乎相同的 sub-form 组件。

第一次一切正常，但如果 更改其按钮数量或其标签值（如果 2选择恰好具有相同的选项，分段按钮仍然可以正常工作）。

Example: The initial set of 3 options had "adult & "unknown" ...

After changing the dropdown & the passed-in array of segment options, the common choices can still be selected, but I cannot set "calf" or "yearling" as Active (although in the component code & formGroup model it does get set). If I first select "goat", which only has 1 "unknown" option, that's the only one I can select.

"Calf" only turns light/disabled instead of "Active". This is what I need to fix.

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

基本上一切似乎都有效除了 Ionic 样式和 CSS 类随后对 @Input 按钮选项数组的更改.

我的问题： Where/how 我可以告诉 Ionic <ion-segment> 只使用最新的值和段数吗？教程或 Ionic 文档中的示例使用静态列表和 template-driven 形式 [(ngModel)] data-binding，我不能使用 w/a 反应形式。这只有可以用 template-driven 形式吗？？

Answer 1

所以在浪费了太多时间之后，结果证明这是一些问题 w/how Ionic 将 CSS classes 应用于使用结构指令的组件...... None 的生命周期或 ChangeDetection 方法起作用，因为它已经是最新的！呜....

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

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

结果是它看起来好像你不能select更新分段按钮...

但是您可以 - 除了将 segment-activated CSS class 应用到 selected 按钮并将其从所有其他按钮中删除之外，一切正常。

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

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

<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');
}

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

Ionic3 <ion-segment> w/dynamic 内容不会显示所选内容 CSS class

Ionic3 <ion-segment> w/dynamic content won't show selected CSS class

ionic3

ionic-native

angular4-forms