离子 - 当标签<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>

问题是，当变量显示的值为真(表单可见/显示)并且当我单击按钮时，没有任何反应，也没有错误。但是当我从标签中删除 *ngIf="show" 时，单击按钮会正确调用该函数。

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

会不会是某种绑定问题？

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

我需要帮助。

Answer 1

好吧，你有很多方法来完成这项任务。

首先，你必须知道，在角度中，你有两种类型的指令，结构指令和无结构指令。

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

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

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

元件

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>