如何动态更改 ion-checkbox 中 [checked] 属性的值？

Posted 2023-03-13

【中文标题】如何动态更改 ion-checkbox 中 [checked] 属性的值？

【英文标题】：How do I dynamically change the value of [checked] property in ion-checkbox?

【发布时间】：2021-11-21 03:28:20

【问题描述】：

<ion-list lines='full'>
  <ng-container *ngFor="let item of data">
  <ion-item>
      <ion-label class="ion-text-wrap">
           item.Title
      </ion-label>
      <ion-checkbox slot="end"
      (ionChange)="onDataCheckBoxChange(item.Id, $event)" 
      [checked]="item.selected"  
      ></ion-checkbox>
  </ion-item>  
  </ng-container>
</ion-list>

现在在 ngOnInit() 我返回一个项目 ID 数组，即 1,23,4,5,6 等

现在，如果item.Id 在我返回的items ids 数组中，我希望选择[checked] 属性。

所以，到目前为止，我已经尝试在复选框上创建另一个循环，但它会重复所有复选框。

我怎样才能做到这一点？

【问题讨论】：

我无法完全理解，您的项目现在是数字 (1,2,3,4,5,6,...) 还是对象？什么时候设置item.selected？

只是数字数组而已。

【参考方案1】：

我对 ion 了解不多，但我的方法是编写一个函数，如果复选框的 id 在数组中，则返回 true，如下所示：

isChecked(itemId) 
    return (checkedIds.find((id) => id === itemId) !== undefined ? true : false);

然后在复选框上调用它

编辑：这是假设您的 id 是数字

Edit2：也许你可以使用SelectionModel。

【讨论】：

但在 changedetector 中这将是一个问题。

【参考方案2】：

您可以做的是将数字数组（例如1,2,3,4,5, ...）映射到对象数组（例如[ id: 1, selected: true , id: 2, selected: false, id: 2, selected: true , ...]），然后更新onDataCheckBoxChange函数中的选定值。

ngOnInit() 
  ...
  // this.selectedIds: number[] - contains the initially selected ids
  // numbers: number[] - contains all the numbers e.g. [1,2,3, ...]
  this.data = numbers.map((id: number) => ( id: id, selected: this.selectedIds.includes(id));


onDataCheckBoxChange(itemId: number, checked: boolean) 
  if ( checked ) 
    this.selectedIds.push(itemId);
   else 
    this.selectedIds = this.selectedIds.filter((id: number) => id !== itemId);
  
  this.data.find((item) => item.id === itemId).selected = checked;

【参考方案3】：

您只需要创建数组并传递 true 或 false 等值，因为 ion-checkbox 只接受 true 或 false。

demoArr: any = [
 id: 1, selected: true ,
 id: 2, selected: false ,
 id: 3, selected: true ,];

在 html 端这样做，你会得到你的输出。

我分叉了演示示例，您可以在这里查看： https://stackblitz.com/edit/ionic-qzpmhu?file=app/main.ts