Question

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

它都尝试了

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。有什么想法吗？

Answer 1

复选框上有一个ngModel，因此可以确定checked的值。

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

soldItem.ebay的值将确定checked的状态。如果将其设置为true，则checkbox将以checked开头。

无关的注释。考虑使用reactive forms。

反应形式通过对数据模型的同步访问提供了更多的可预测性，通过可观察的运算符实现了不变性，并且通过可观察的流进行了更改跟踪。如果您希望直接访问来修改模板中的数据，则模板驱动的表单不太明确，因为它们依赖于模板中嵌入的指令以及可变数据来异步跟踪更改

guide与模板驱动（您现在拥有的）和反应形式之间的关键区别。

通常：


反应形式更强大：它们更具可伸缩性，可重用性和可测试性。如果表单是应用程序的关键部分，或者您已经在使用反应式构建应用程序，请使用反应式。

模板驱动的表单对于将简单表单添加到应用程序非常有用，例如电子邮件列表注册表单。它们很容易添加到应用程序中，但是不像可伸缩表单那样可扩展。如果您有非常基本的表单要求和逻辑，可以仅在模板中进行管理，请使用模板驱动的表单。

Answer 2

问题：使用 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;
}

第一次点击后，复选框切换仍然为假，但之后切换为“已选中”，即使绑定设置为假 - 并且每次都会显示警报。

ion-checkbox的“ checked”属性不起作用

2 个答案: