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

Posted 2023-03-16

【中文标题】离子 - 当标签 <form> 中有 *ngIf 时无法获取离子输入的值

【英文标题】：Ionic - Can't get value of ion-input when there is *ngIf in tag <form>

【发布时间】：2018-10-25 10:36:20

【问题描述】：

我正在使用 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() 中，但没有任何改变..

我需要帮助。

【参考方案1】：

你有很多方法可以完成这项任务。

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

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

另一种类型的指令就像在这种情况下ion-label 中的floating 指令一样，它会修改元素，但不会将其从模板中删除，可能会隐藏或使用 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 块的状态和条件。

【参考方案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>