时间戳

首页 > 解决方案 > 离子 - 当标签中有 *ngIf 时无法获取离子输入的值

angular - 离子 - 当标签中有 *ngIf 时无法获取离子输入的值

问题描述

我正在使用 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（表单可见/显示）并且当我单击按钮时，什么也没有发生，也没有错误。但是当我从 tag 中删除 *ngIf="show" 时，单击按钮会正确调用该函数。

我不知道问题是什么，我不想只是使用 [hidden] 之类的东西来隐藏表单，如果条件为假，我不希望创建它。

会不会是某种绑定问题？

我已经尝试将条件放在 ionViewWIllEnter() 中，但没有任何变化。

我需要帮助。

标签： angularionic-frameworkionic3

解决方案

那么你有很多方法来完成这项任务。

首先，您必须知道，在 Angular 中，您有两种类型的指令，结构化指令和非结构化指令。

结构指令是将从视图中删除或添加 html 块的指令，例如：*ngIf, *ngFor, *ngSwitch.

另一种类型的指令就像在这种情况下floating，您的指令ion-label将修改元素，但不会将其从模板中删除，可能会使用 css 属性隐藏或显示它。

也就是说，您可以使用 aNgModel绑定您的折扣输入的值，当输入不再存在时，您仍然拥有该值。

零件

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]指令，则性能不如 a*ngIf因为 angular 仍会检查隐藏的 html 块的状态和条件。

推荐阅读