如何将数据仅绑定到使用 `ngFor` 创建的子项之一？

Question

我想做一个点击显示下一张图片的画廊来显示下一张图片，感觉像一个画廊。我正在尝试 'bind data' to child 方法。但是当我点击其中一张图片时，每张图片都绑定到数据，并显示相同的图片。我正在尝试更改一张图片。

这是 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'
    }
]

或者你们有更好的点击切换图库的方法吗？我没留下多少脑汁。

Answer 1

首先，为每个凭证对象添加一个新的属性，它将作为每个凭证库的索引:

 {
      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]);
  }

索引属性替换了你的计数器

如何将数据仅绑定到使用 `ngFor` 创建的子项之一？

How to bind data to only one of the children which was created using `ngFor`?

ionic-framework

ionic2

ionic3