Как привязать данные только к одному из дочерних элементов, которые были созданы с помощью `ngFor`? - PullRequest
Новая
       8

Как привязать данные только к одному из дочерних элементов, которые были созданы с помощью `ngFor`?

0 голосов
/ 10 октября 2018

Я хочу создать галерею «нажми и покажи следующую картинку», чтобы показать следующую картинку, почувствовать себя галереей.Я пытаюсь «привязать данные» к детскому подходу.но когда я щелкнул по одному из изображений, каждое изображение было привязано к данным и показывало одну и ту же картинку.Я пытаюсь изменить одно изображение.

Вот как выглядит HTML.Я создаю изображения, используя ngFor.

<ion-slide *ngFor='let voucher of vouchers; let i=index'>
      <ion-card class='slide-card'>
        <ion-row class='image-box-row' align-items-end>
          <ion-col no-padding>
            <span class='image-box'>
              <img id='switchableImage' [src]='imageUrl' (click)='switchImage(i)'>
            </span>
          </ion-col>
        </ion-row>
        <ion-row class='bottom-content-row'>
          <ion-col class='bottom-content' text-left>
            <span id='voucherName'>{{voucher.voucherName}}</span>
            <span id='quantitySold'>{{voucher.quantitySold}} Sold</span>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-slide>

, и это ts-файл, присваивающий 'imageUrl' значение из массива объектов. 

switchImage(i) {
    console.log('slides ' + i + ' is tapped');
    this.counter += 1;
    console.log('counter is ' + this.counter);
    if (this.counter > this.vouchers[i].voucherImages.length -1) {
      this.counter = 0;
    }
    console.log(this.vouchers[i].voucherImages[this.counter]);
    this.imageUrl = this.vouchers[i].voucherImages[this.counter];
  }

Мой массив объектоввыглядеть так 

public vouchers: any = [
    {
      voucherId: 1,
      restaurantId: 1,
      voucherImages: [
        '../../assets/imgs/set1.jpg',
        '../../assets/imgs/set1_2.jpg'
      ],
      voucherName: 'Valuable One Person Set Meal',
      suitablePax: 1,
      quantitySold: 119,
      newPrice: 20,
      basePrice: 25,
      currency: 'RM'
    },
    {
      voucherId: 2,
      restaurantId: 1,
      voucherImages: [
        '../../assets/imgs/set2.jpeg',
        '../../assets/imgs/set2_2.jpg',
        '../../assets/imgs/set2_3.jpg'
      ],
      voucherName: 'Romantic Two Person Steak Meal',
      suitablePax: 2,
      quantitySold: 119,
      newPrice: 89.9,
      basePrice: 120,
      currency: 'RM'
    }
]

Или у вас, ребята, есть лучший способ сделать щелчок для переключения галереи изображений?Я не оставил много сока мозга.

1 Ответ

0 голосов
/ 10 октября 2018

Сначала добавьте новое свойство к каждому объекту ваучера, это будет индекс каждой галереи ваучеров: 

 {
      voucherId: 1,
      restaurantId: 1,
      voucherImages: [
        '../../assets/imgs/set1.jpg',
        '../../assets/imgs/set1_2.jpg'
      ],
      voucherName: 'Valuable One Person Set Meal',
      suitablePax: 1,
      quantitySold: 119,
      newPrice: 20,
      basePrice: 25,
      currency: 'RM'
      index: 0
  }

Затем, в вашем HTML, в источнике изображения, установите ваши voucherImages ивыбранный индекс. 

<img id='switchableImage' [src]='voucher.voucherImages[voucher.index]' (click)='switchImage(i)'>

И просто увеличивайте индекс ваучера при каждом нажатии: 

switchImage(i) {
    console.log('slides ' + i + ' is tapped');
    this.vouchers[i].index += 1;
    console.log('counter is ' + this.vouchers[i].index);
    if (this.vouchers[i].index > this.vouchers[i].voucherImages.length -1) {
      this.vouchers[i].index = 0;
    }
    console.log(this.vouchers[i].voucherImages[this.vouchers[i].index]);
  }

Свойство индекса заменяет ваш счетчик

...