Ionic framework 如何限制用户仅从Ionic中的项目列表中选择一个项目
我在爱奥尼亚应用程序中工作,我已经显示了项目列表,其中有项目选择的复选框。用户只能选择一个项目,但问题是,在我的项目列表中,用户可以选择所有项目 这是我的shopping.html:Ionic framework 如何限制用户仅从Ionic中的项目列表中选择一个项目,ionic-framework,ionic3,Ionic Framework,Ionic3,我在爱奥尼亚应用程序中工作,我已经显示了项目列表,其中有项目选择的复选框。用户只能选择一个项目,但问题是,在我的项目列表中,用户可以选择所有项目 这是我的shopping.html: <ion-list *ngFor="let itm of shippingdetails"> <ion-item-divider> <ion-checkbox slot="end" [disabled]="isCheckboxDisabled
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
isCheckboxDisabled:boolean=false;
selectCP(itm){
}
我无法解释这一点的逻辑。在my html中,用户可以选择所有项目。非常感谢您的帮助
您可以使用
{{itm.name}
您可以按如下方式进行操作
HTML
<ion-content padding>
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" checked="{{itm.isChecked}}" (ionChange)="selectCP($event, itm)"></ion-checkbox>
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
</ion-content>
我认为这会有帮助。找到一个工作,它也选择了所有项目。因为您给所有项目赋予了相同的值。现在我已经定义了这个,但是在那之后,它也选择了所有的项目。{{itm.name}*ngFor=“让itm of shippingdetails”应该在离子项目而不是离子列表中谢谢您的回答。
<ion-content padding>
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" checked="{{itm.isChecked}}" (ionChange)="selectCP($event, itm)"></ion-checkbox>
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
</ion-content>
import { Component } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
shippingdetails: any = [];
constructor() {
this.shippingdetails = [
{ name: 'Raghav', mobile: '0771111111', isChecked: false },
{ name: 'Rahul', mobile: '0772222222', isChecked: false },
{ name: 'Virat', mobile: '0773333333', isChecked: false },
{ name: 'Sanga', mobile: '0774444444', isChecked: false },
];
}
selectCP(event, item) {
if (event.checked) {
this.shippingdetails.forEach(shpItm => {
if (shpItm.name === item.name) {
shpItm.isChecked = true;
} else {
shpItm.isChecked = false;
}
});
}
if (!event.checked) {
this.shippingdetails.forEach(shpItm => {
if (shpItm.name === item.name) {
shpItm.isChecked = false;
}
});
}
}
}