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

Question

<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] 属性。

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

我怎样才能做到这一点？

Answer 1

我不太了解 ion，但我的方法是编写一个函数，如果复选框的 ID 在数组中，则 returns 为真，如下所示：

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

然后在复选框上调用它

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

Edit2：也许你可以使用 SelectionModel。

Answer 2

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

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

Answer 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

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

How do I dynamically change the value of [checked] property in ion-checkbox?

typescript

ionic-framework

ngfor

ionic3

angular

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

How do I dynamically change the value of [checked] property in ion-checkbox?

typescript

ionic-framework

ngfor

ionic3

angular

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