离子复选框“选中”属性不起作用

Question

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

两个都试了

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

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