ion-checkbox "checked" 属性不起作用

Question

我是 angular/ionic 的新手，我正在尝试创建一个带有默认选中的复选框的表单。

两者都试过了

checked

和

checked="true"

但两者都不起作用。奇怪的是，属性 'disabled' 工作得很好。

这是我的 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.

Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams. If you prefer direct access to modify data in your template, template-driven forms are less explicit because they rely on directives embedded in the template, along with mutable data to track changes asynchronously

A guide 模板驱动（你现在拥有的）和反应形式之间的主要差异。

In general:

Reactive forms are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.

Template-driven forms are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

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;
}

第一次单击后复选框切换仍然为 false，但之后切换为 'checked'，即使绑定设置为 false - 并且每次都会显示警报。

ion-checkbox "checked" 属性不起作用

ion-checkbox "checked" attribute not working

ionic-framework

angular

ionic4

ion-checkbox

angular8