我对角/离子还很陌生,我正在尝试创建一个带有默认选中复选框的表单。
它都尝试了
checked
和
checked="true"
,但都不起作用。 奇怪的是,“禁用”属性可以正常工作。
这是我的html:
<ion-header>
<ion-toolbar>
<ion-title>sold-items</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form (ngSubmit)="addSoldItem()" name="addItemForm">
<ion-item>
<ion-label>Name</ion-label>
<ion-input type="text" [(ngModel)]="soldItem.item" name="item"></ion-input>
</ion-item>
<ion-item>
<ion-label>Brutto</ion-label>
<ion-input type="number" [(ngModel)]="soldItem.gross" name="gross"></ion-input>
</ion-item>
<ion-item>
<ion-label>eBay</ion-label>
<ion-checkbox checked [(ngModel)]="soldItem.ebay" name="ebay"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>PayPal</ion-label>
<ion-checkbox checked="true" [(ngModel)]="soldItem.paypal" name="paypal"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Provision</ion-label>
<ion-checkbox checked="true" [(ngModel)]="soldItem.commission" name="commission"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Versand soll</ion-label>
<ion-input type="number" [(ngModel)]="soldItem.shipping_must" name="shipping_must"></ion-input>
</ion-item>
<ion-item>
<ion-label>Versand ist</ion-label>
<ion-input type="number" [(ngModel)]="soldItem.shipping_is" name="shipping_is"></ion-input>
</ion-item>
<button ion-button type="submit" block>Hinzufügen</button>
</form>
<ion-card *ngFor="let soldItem of (soldItems | async)?.slice().reverse()">
<ion-card-header>
<ion-card-title>{{ soldItem.item }}</ion-card-title>
<ion-card-subtitle>€ {{ soldItem.gross }}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<p>
<b>Netto: €</b> {{ soldItem.net }}
</p>
<p>
<b>eBay: €</b> {{ soldItem.ebay_fees }}
</p>
<p>
<b>PayPal: €</b> {{ soldItem.paypal_fees }}
</p>
<p>
<b>Versand soll: €</b> {{ soldItem.shipping_must }}
</p>
<p>
<b>Versand ist: €</b> {{ soldItem.shipping_is }}
</p>
<p>
<b>Verkauft am: </b> {{ soldItem.date_sold }}
</p>
</ion-card-content>
</ion-card>
</ion-content>
我在带有最新Safari浏览器的MacBook Pro上使用angular8和ionic4。有什么想法吗?
答案 0 :(得分:3)
复选框上有一个ngModel
,因此可以确定checked
的值。
<ion-checkbox [(ngModel)]="soldItem.ebay" name="ebay"></ion-checkbox>
soldItem.ebay
的值将确定checked
的状态。如果将其设置为true,则checkbox
将以checked
开头。
无关的注释。考虑使用reactive forms。
反应形式通过对数据模型的同步访问提供了更多的可预测性,通过可观察的运算符实现了不变性,并且通过可观察的流进行了更改跟踪。如果您希望直接访问来修改模板中的数据,则模板驱动的表单不太明确,因为它们依赖于模板中嵌入的指令以及可变数据来异步跟踪更改
guide与模板驱动(您现在拥有的)和反应形式之间的关键区别。
通常:
- 反应形式更强大:它们更具可伸缩性,可重用性和可测试性。如果表单是应用程序的关键部分,或者您已经在使用反应式构建应用程序,请使用反应式。
- 模板驱动的表单对于将简单表单添加到应用程序非常有用,例如电子邮件列表注册表单。它们很容易添加到应用程序中,但是不像可伸缩表单那样可扩展。如果您有非常基本的表单要求和逻辑,可以仅在模板中进行管理,请使用模板驱动的表单。
答案 1 :(得分:0)
问题:使用 TEMPLATE 方法,这第一次工作正常,但此后切换忽略 ngModel:
Template:
<ion-row>
<ion-col size="4">
<b>Account No:</b>
</ion-col>
<ion-col size="7">
<ion-input type="text" [(ngModel)]="AccNo" name="AccNo"></ion-input>
</ion-col>
<ion-col size="1">
<input type="checkbox" name="AccNoChkBox" [(ngModel)]="AccNoChkBox"
(change)="CheckBoxChange('AccNo')">
</ion-col>
</ion-row>
TypeScript:
CheckBoxChange(Field) {
// --- By way of example, always set the check box to false
alert("Here");
this.AccNoChkBox = false;
}
第一次点击后,复选框切换仍然为假,但之后切换为“已选中”,即使绑定设置为假 - 并且每次都会显示警报。