angular - 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

模板驱动(您现在拥有的)和 react 形式之间的关键区别的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.