使用 <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，当我返回到段a段a时，其输入的数据丢失/空白。/p>

我该怎么办？我可以使用另一个组件来获得与细分市场相同的结果吗？

Answer 1

问题是，诸如*ngSwitch和*ngFor之类的结构指令在其purview下添加并删除组件。当删除组件时，他们在绑定中持有的任何数据也将被删除。当元素被添加回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>

这将起作用，但我不喜欢它，因为我们需要否定所有条件，这可能会更复杂，而且阅读并不清楚。因此，让我们创建自己的IT指令。

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>