При использовании <ion-сегмента> данные, вставленные в форму, теряются при смене сегментов - PullRequest
Новая
       7

При использовании <ion-сегмента> данные, вставленные в форму, теряются при смене сегментов

0 голосов
/ 25 апреля 2018

Я создаю гибридное приложение, используя 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, его входные данные теряются / остаются пустыми.

Что мне сделать, чтобы это исправить? Есть ли другой компонент, который я мог бы использовать, чтобы получить те же результаты, что и сегмент?

1 Ответ

0 голосов
/ 26 апреля 2018

Проблема в том, что структурные директивы, такие как *ngSwitch и *ngFor, добавляют и удаляют компоненты, относящиеся к их компетенции. Когда компонент удаляется, любые данные, которые они содержат в своих привязках, также будут удалены. Когда элемент добавляется обратно в 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>
...