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

【问题标题】：How do I dynamically change the value of [checked] property in ion-checkbox?如何动态更改 ion-checkbox 中 [checked] 属性的值？
【发布时间】：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？
只是数字数组而已。

标签： angular typescript ionic-framework ionic3 ngfor

【解决方案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

【讨论】：