Ionic - Невозможно получить значение ионного входа, если в теге <form>есть * ngIf

Question

Я создаю гибридное приложение с использованием Ionic 3 и Angular, и я застрял на этом:

У меня есть форма, и я хочу, чтобы она появлялась только в зависимости от условия в контроллере.

Контроллер:

export class ClassName implements OnInit{
  private show: boolean = false;

  ngOnInit(){
    if(someCondition){
      this.show = true;
    }
  }
}

Вид:

<ion-content>
<button ion-button small block full color="danger" (click)="sum(discount.value)">Cancelar</button>

    <form *ngIf="show">  
      <ion-list>
        <ion-item>
            <ion-label  floating>Discount ($)</ion-label>
            <ion-input  #discount type="number"></ion-input>
          </ion-item>
      </ion-list>
    </form>

Проблема в в том, что когда значение переменной show равно true (форма видима / отображается) и когда я нажимаю кнопку, ничего не происходит, ошибок тоже нет. Но когда я удаляю * ngIf = "show" из тега, кнопка click вызывает функцию правильно.

Я не знаю, в чем проблема, и я не хочу просто скрывать форму, используя что-то вроде [hidden], я не хочу, чтобы она создавалась, если условие ложно.

Может быть, это какая-то проблема связывания?

Я уже пытался поставить условие в ionViewWIllEnter (), но ничего не меняется ..

Мне нужна помощь.

Answer 1

Что ж, у вас есть много подходов для выполнения этой задачи.

Прежде всего вам нужно знать, что в угловых у вас есть два типа директив: структурные и неструктурные.

Структурные директивы - это директивы, которые удаляют или добавляют блок html из представления, например: *ngIf, *ngFor, *ngSwitch.

Другой тип директивы подобен этомуЕсли директива floating в вашем ion-label изменит элемент, но он не удалит его из шаблона, может скрыть или отобразить его с помощью свойств css.

При этом вы можете использовать NgModel для привязки к значению вашего дисконтного ввода, и когда его больше нет, у вас все еще есть значение.

Компонент

export class ClassName implements OnInit{
  private show: boolean = false;
  public discount: number = 0;

  ngOnInit(){
    if(someCondition){
      this.show = true;
    }
  }
}

Просмотр

<button ion-button small block full color="danger" (click)="sum(discount)">Cancelar</button>

<form *ngIf="!show">  
   <ion-list>
      <ion-item>
         <ion-label  floating>Discount ($)</ion-label>
         <ion-input  type="number" [(ngModel)]="discount"></ion-input>
      </ion-item>
   </ion-list>
</form>

Это сделает работу, помните, что если у вас есть директива [hidden], она менее производительна, чем *ngIf, потому что angular по-прежнему будет проверять состояние и условия блокаhtml скрыто.

Answer 2

*ngIf не просто показывает или скрывает компонент, он фактически создает или удаляет экземпляр компонента из шаблона.

Чтобы показать или скрыть ваш компонент, вы можете использовать атрибут hiddenкак это:

<form [hidden]="!show">  
    <ion-list>
      <ion-item>
         <ion-label  floating>Discount ($)</ion-label>
         <ion-input  #discount type="number"></ion-input>
      </ion-item>
    </ion-list>
</form>