使用<ion-segment>，改变segment时插入form的数据会丢失答案

【问题标题】：Using <ion-segment>, data inserted in form is lost when changing segments使用<ion-segment>，改变segment时插入form的数据会丢失
【发布时间】：2018-04-26 07:14:26
【问题描述】：

我正在使用 Ionic3+Angular 构建一个混合应用程序，但我被困在这个问题上：

我有一个分成几段（A 和 B）的表格，如下所示：

<form [formGroup]="testForm">     
  <ion-segment formControlName="segmentTest" [(ngModel)]="segmentTest">
    <ion-segment-button value="A">
      Segment A
    </ion-segment-button>
    <ion-segment-button value="B">
      Segment B
    </ion-segment-button>    
  </ion-segment> 

  <div [ngSwitch]="segmentTest">        
    <ion-list *ngSwitchCase="'A'">
      <ion-item>
        <ion-label  floating>Input A</ion-label>
        <ion-input type="number"></ion-input>
      </ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'B'">
      <ion-item>
        <ion-label  floating>Input B</ion-label>
        <ion-input type="number"></ion-input>
      </ion-item>
    </ion-list>    
  </div>
</form>

问题是：当我在输入 A（Segment A）中插入一些数据，然后我更改为 Segment B，当我返回 Segment A 时，它的输入数据丢失/空白。

我应该怎么做才能修复它？我可以使用其他组件来获得与 Segment 相同的结果吗？

【问题讨论】：

你确定 switch 是你想要的吗？似乎你最好通过展示和隐藏来服务。 Switch 是一个结构指令，因此从 Dom 中删除和添加内容
非常感谢@AluanHaddad，我之前没有考虑过这种方法，但是这个显示和隐藏解决了我的问题！
很高兴为您提供帮助。我还添加了一些额外内容的答案

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

问题在于像*ngSwitch 和*ngFor 这样的结构指令会添加和删除其权限范围内的组件。当一个组件被删除时，它们在绑定中保存的任何数据也将被删除。当由于 switch case 再次匹配而将元素添加回 Dom 时，组件会再次实例化，旧的组件早已被丢弃。

因此，要切换这些部分，您需要有条件地显示和隐藏元素，而不是使用结构指令。

这是一个例子：

<ion-list [hidden]="segmentTest !== 'B'">
  <ion-item>
    <ion-label floating>Input A</ion-label>
    <ion-input type="number"></ion-input>
  </ion-item>
</ion-list>
<ion-list [hidden]="segmentTest !== 'A'">
  <ion-item>
    <ion-label  floating>Input B</ion-label>
    <ion-input type="number"></ion-input>
  </ion-item>
</ion-list>

这会起作用，但我不喜欢它，因为我们需要否定所有条件，这可能更复杂，而且阅读起来不太清楚。所以让我们创建一个拥有它的指令。

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({selector: '[showWhen]'}) export default class {
  constructor(elementRef: ElementRef) {
    this.ref = elementRef;
  }

  @Input() set showWhen(value) {
    this.ref.nativeElement.hidden = !value;
  }
  get showWhen() {
    return !this.ref.nativeElement.hidden;
  }

  // intentional framework stupid weak typing defeated.
  ref: {nativeElement: Element};
}

然后我们可以写

<ion-list [showWhen]="segmentTest === 'A'">
  <ion-item>
    <ion-label floating>Input A</ion-label>
    <ion-input type="number"></ion-input>
  </ion-item>
</ion-list>

【讨论】：