5

我对角度/离子很陌生,我正在尝试创建一个带有默认选中复选框的表单。

它尝试了两者

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: €&lt;/b> {{ soldItem.net }}
            </p>
            <p>
                <b>eBay: €&lt;/b> {{ soldItem.ebay_fees }}
            </p>
            <p>
                <b>PayPal: €&lt;/b> {{ soldItem.paypal_fees }}
            </p>
            <p>
                <b>Versand soll: €&lt;/b> {{ soldItem.shipping_must }}
            </p>
            <p>
                <b>Versand ist: €&lt;/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。有任何想法吗?

4

2 回答 2

6

复选框上有一个ngModel,因此将确定checked值。

<ion-checkbox [(ngModel)]="soldItem.ebay" name="ebay"></ion-checkbox>

的值soldItem.ebay将决定checked状态。如果将其设置为 true,checkbox则将checked开始。


在一个无关的笔记上。考虑使用反应形式

响应式表单通过对数据模型的同步访问、可观察运算符的不变性以及通过可观察流的更改跟踪提供了更多的可预测性。如果您更喜欢直接访问以修改模板中的数据,那么模板驱动的表单不太明确,因为它们依赖嵌入在模板中的指令以及可变数据来异步跟踪更改

模板驱动(您现在拥有的)和响应式表单之间的主要差异指南

一般来说:

  • 反应式表单更健壮:它们更具可扩展性、可重用性和可测试性。如果表单是应用程序的关键部分,或者您已经在使用响应式模式来构建应用程序,请使用响应式表单。
  • 模板驱动的表单对于将简单表单​​添加到应用程序(例如电子邮件列表注册表单)非常有用。它们很容易添加到应用程序中,但它们的扩展性不如响应式表单。如果您有非常基本的表单要求和可以单独在模板中管理的逻辑,请使用模板驱动的表单。
于 2019-12-25T22:10:32.017 回答
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;
}

复选框切换在第一次单击后保持为假,但在切换到“选中”后,即使绑定设置为假 - 并且,每次都会显示警报。

于 2021-01-16T08:18:18.973 回答