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

时间:2019-12-25 21:28:47

标签: angular ionic-framework ionic4 angular8 ion-checkbox

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

它都尝试了

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>

它是这样的: enter image description here

我在带有最新Safari浏览器的MacBook Pro上使用angular8和ionic4。有什么想法吗?

2 个答案:

答案 0 :(得分:3)

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

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

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


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

  

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

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

  

通常:

     
      
  • 反应形式更强大:它们更具可伸缩性,可重用性和可测试性。如果表单是应用程序的关键部分,或者您已经在使用反应式构建应用程序,请使用反应式。
  •   
  • 模板驱动的表单对于将简单表单​​添加到应用程序非常有用,例如电子邮件列表注册表单。它们很容易添加到应用程序中,但是不像可伸缩表单那样可扩展。如果您有非常基本的表单要求和逻辑,可以仅在模板中进行管理,请使用模板驱动的表单。
  •   

答案 1 :(得分: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;
}

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