Блог

Главная - Вопросы по программированию - Как динамически изменить значение свойства [проверено] в ion-флажке?

Как динамически изменить значение свойства [проверено] в ion-флажке?

#angular #typescript #ionic-framework #ionic3 #ngfor

Вопрос:

 <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() я возвращаю массив идентификаторов элементов, т. е. 1,23,4,5,6 и т. Д

Теперь я хочу [checked] , чтобы свойство было выбрано, если item.Id оно находится в массиве items ids , который я вернул.

Итак, до сих пор я пытался создать еще один цикл для флажка, но он повторяет все флажки.

Как я могу этого достичь?

Комментарии:

1. Я не могу полностью понять, являются ли ваши предметы теперь номерами (1,2,3,4,5,6,…) или это объект? И когда это item.selected произойдет?

2. просто массив чисел, вот и все.

Ответ №1:

что вы можете сделать, так это сопоставить свой массив чисел (например 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;
}

Ответ №2:

Я мало что знаю об ионе, но мой подход состоял бы в написании функции, которая возвращает значение true, если идентификатор флажка находится в массиве, например:

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

а затем вызовите его на флажке

Изменить: это при условии, что ваши идентификаторы являются номерами

Edit2: возможно, вы можете использовать selectionModel.

Комментарии:

1. но в детекторе изменений это было бы проблемой.

Ответ №3:

Вам просто нужно создать массив и передать значение, такое как true или false, как ion-флажок принимает только 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

Метки: