如何像Ionic一样在iPhone UX中编辑可检查项目的列表？

Question

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

1st Picture2nd picture

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

Answer 1

通过查看图像，我发现您正在实现离子型单选按钮。而且您想识别选择了哪些元素。下面的代码获取用户单击的单选按钮的值，然后将其从数组中删除。i是要删除的选定项的索引，1是要删除的元素数。

radio-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);
  }


}