Question

我刚刚开始使用Ionic 2，我不知道如何只选择一个项目。我有一个地址列表，当我选择一个地址时，选择了整个列表。

HTML

<ion-list>
                <ion-item (click)="selectAddress(adress)" *ngFor="let address of addresses">
                    <ion-avatar item-left *ngIf="item == false">
                        <ion-icon name="md-add"></ion-icon>
                    </ion-avatar>
                    <ion-avatar aria-label="Checkbox 2" ng-true-value="'yup'" item-left *ngIf="item == true">
                        <ion-icon name="md-checkmark"></ion-icon>
                    </ion-avatar>
                    <h2>{{adress.city}}</h2>
                </ion-item>
                <ion-item color-text = "danger" (click)="addAdress()" *ngIf="address.length == 0">
                    <ion-avatar item-left>
                        <ion-icon name="md-home"></ion-icon>
                    </ion-avatar>
                    <h2 class="danger1">There are no addresses</h2><p></p>
                    <h3 class="danger2">Click to register</h3>
                </ion-item>
</ion-list>

打字稿

item: boolean = false;
selectAddress(address: any) {
    this.address= address;
    if (this.item == true) {
      this.item = false;
      this.address = null;
    } else {
      this.item = true;
    }
}

方法addAddress我只是发送选中的地址'this.address = address;'到Java。我只需要选择一个地址。通过这种方式，我将只为Java选择一个，但所有人的图标都是相同的。我怎么能这样做？

Answer 1

您需要适应正在发生的阵列。您只有一个项目，但还有一组地址。我通常做的是选择在ngFor的对象上选择。

public selectAddress(address: any): void {
    this.address = address;
    address.selected = !address.selected || false;
}

然后像这样测试：

<ion-avatar item-left *ngIf="address.selected === false">
     <ion-icon name="md-add"></ion-icon>
</ion-avatar>

如何在Ionic上只选择一个项目？

1 个答案: