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

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=地址;'发送到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>