在列表上选择操作

Question

我有一个列表，选择列表的最后一项后，我希望它始终选择第一个。

有没有办法做到这一点？

<ion-select interface="popover" [ngModel]="selecteduser._id" (ngModelChange)="selectUser($event)">
    <ion-option *ngFor="let user of users" [value]="user._id">
      </ion-content>{{ getUserNickname(user }} </ion-option>
    <ion-option  (ionSelect)="openConfigPage()" >Configuration</ion-option>
</ion-select>

所以我想当我单击我的配置时，它将选择列表的第一项

有我的ts

openConfigPage() {
    this.selectedUser = this.users[0]; // Will select the first item of the list 
    this.navCtrl.push(ConfigPage)
}

selectUser(userId: string) {
    this.selectedUser = this.users.find(b => b._id === userId)
    this.onSelect.emit(this.selectedUser)
}

有没有办法使用DOM？

Answer 1

将isUserSelected声明为布尔数组，然后像这样填充它：

openConfigPage() {
    this.isUserSelected = this.users.map((e, i) => {
      return (i === 0) ? true : false; 
    });
    this.navCtrl.push(ConfigPage)
}

然后在html端使用selected属性，如下所示：

<ion-select interface="popover" [ngModel]="selecteduser._id" (ngModelChange)="selectUser($event)">
    <ion-option *ngFor="let user of users; let i = index" [value]="i" [selected]="isUserSelected[i]" (ionSelect)="selectUser(i)">
      </ion-content>{{ getUserNickname(user }} </ion-option>
    <ion-option  (ionSelect)="openConfigPage()" >Configuration</ion-option>
</ion-select>

此外，当用户选择某些内容（通过isUserSelected方法）时，请不要忘记更新selectUser()（布尔数组）的值。

selectUser(id) {
    this.selectedUser = this.users[id];
    this.isUserSelected = this.isUserSelected.map((v, i) => (i === id) ? true : false);
    this.onSelect.emit(this.selectedUser)
}

详细了解here。