如何在 Ionic 中编辑可检查项目列表，例如在 iPhone UX 中？

Question

我想要与接下来的两张图片相同的列表编辑过程。

第一张图第二张图

我尝试使用 ngFor 并通过为我在此 ngFor 中显示的值提供索引来做到这一点，但我正在努力寻找有关如何识别已在切换（或单选按钮，无论如何）中选中的元素的解决方案)，所以基本上应该从显示中删除哪个元素。

Answer 1

通过查看图像，我知道您正在使用 ionic 实现单选按钮。 并且您想识别已选择的元素。 下面的代码获取用户单击的单选按钮的值，然后将其从数组中删除。i 是要删除的所选项目的索引，1 是要删除的元素数。

单选buttons.html：

<ion-header>
  <ion-toolbar>
    <ion-title>Radio Buttons</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
<ion-list >
  <ion-radio-group [(ngModel)]="food" >
    <ion-list-header>
      <ion-label>
        Food
      </ion-label>
    </ion-list-header>
    <ion-item *ngFor="let item of items" (click)="onChangeHandler()">
      <ion-label>
        {{item}}
      </ion-label>
      <ion-radio slot="start" value={{item}}>
      </ion-radio>
    </ion-item>    
  </ion-radio-group>
</ion-list>
</ion-content>

在您的 .ts 文件中：

export class RadioButtonsPage implements OnInit {

  items=[];
  food;
  constructor()
   {
     this.items=
     [
       "Pizza",
       "Burgers",
       "Fries",
       "Shawarma",
       "Lemon"
     ];

    }

  ngOnInit() {
  }
  onChangeHandler() 
  {
    let i= this.items.indexOf(this.food);
    this.items.splice(i,1);
  }


}