使用 <ion-segment>，插入到表单中的数据在更改段时丢失

Question

我正在使用 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（段A）中插入一些数据然后我更改为段B时，当我return到段A时它的输入数据是lost/blank.

我应该怎么做才能解决它？我可以使用另一个组件来获得与 Segment 相同的结果吗？

Answer 1

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

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

这是一个例子：

<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>

使用 <ion-segment>，插入到表单中的数据在更改段时丢失

Using <ion-segment>, data inserted in form is lost when changing segments

ionic-framework

ionic2

ionic3

angular