Ionic 3 - 在 .getActiveIndex() 的帮助下从离子幻灯片中删除图像

Question

我已将 gallery/camera 中的图像添加到离子滑块 view.I 有一个操作 sheet 让我可以选择在滑块中添加或删除图像 view.Adding 工作正常，因为我将该图像添加到数组并将更新后的数组提供给滑块。但是为了删除图像，我需要获取滑块上活动图像的索引，然后我需要删除它。我无法使用此代码获取活动索引：

onSlideChanged() {
     try{
      let currentIndex = this.slides.getActiveIndex();
      console.log("Current index is", currentIndex);
     }catch(e){
       console.log("not able to get the active index");
     }   }

这也进入了捕获部分。然后我从数组中删除第一个元素并更新数组 slider.The 当我从操作 sheet 中按下删除按钮时，数组大小减小但滑块中的所有图像消失留下空白 space.

<div *ngIf="field.value" (click)="takePicture(field.name)">
     <ion-slides pager="true" style="max-height:500px" (ionSlideDidChange)="onSlideChanged()">
     <ion-slide *ngFor="let c of field.value">
     <img class="image-attach" [src]="c" draggable="true">
     </ion-slide>
     </ion-slides>
      </div>
      <canvas #latlon style="display:none"></canvas>
    </div>

设置图片到滑块的代码

removePicture(name) {
    for (let i = 0; i < this.formType.template.secs.length; i++) {
      for (let d = 0; d < this.formType.template.secs[i].fields.length; d++) {

        if (this.formType.template.secs[i].fields[d].name == name) {

        if(this.formType.template.secs[i].fields[d].value.length>1)
        {
          this.formType.template.secs[i].fields[d].value.splice(this.currentIndex,1);
          this.attachedImagesArray.splice(this.currentIndex,1);
          console.log(this.formType.template.secs[i].fields[d].value.length);
          var arr = this.formType.template.secs[i].fields[d].value;
          console.log("^^^^^^^",arr);
          this.formType.template.secs[i].fields[d].value = this.formType.template.secs[i].fields[d].value;
        }
        else{
        console.log("*********",this.formType.template.secs[i].fields[d].value);
        this.formType.template.secs[i].fields[d].value = "";
        }
      }
    }
    }
  };

这是我用来从滑块中删除图像的代码。我是 ionic 的新手，所以不知道为什么会这样，我用谷歌搜索但没有任何效果。

使用以下代码将图像放入幻灯片：

selecPicture(name) {
    this.camera.getPicture({
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      targetHeight: 500,
      targetWidth: 500,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }).then((imageData) => {

      //alert(imageData);
      // imageData is a base64 encoded string DATA_URL FILE_URI 'lat: '+lat+', lon: '+lon,
      let base64Image = "data:image/jpeg;base64," + imageData;

      this.geolocation.getCurrentPosition().then((resp) => {
        let lat = resp.coords.latitude;
        let lon = resp.coords.longitude;
        this.lat = lat;
        this.lon = lon;
        let d = new Date();
        let draftSavedTime = d.toString().substr(4, 11);
        let canvas = this.canvasRef.nativeElement;
        let context = canvas.getContext('2d');
        console.log(context);
        console.log("hello");
        let newImg = new Image();
        newImg.src = imageData;
        newImg.onload = () => {

          canvas.setAttribute("width", newImg.height);
          canvas.setAttribute("height", newImg.width);
          // context.drawImage(newImg, 0, 0);
          context.drawImage(newImg, 0, 0, newImg.width, newImg.height);
          // context.font = "15px impact";
          context.font = "bold 13px Arial";
          // context.textAlign = 'center';
          context.fillStyle = 'red';
          context.fillText(draftSavedTime, 20, 20);
          // context.fillText('Lat: '+lat+'     Lon: '+lon, canvas.width / 2, canvas.height * 0.9);
          context.fillText('Lat: ' + lat, canvas.width * 0.1, canvas.height * 0.8);
          context.fillText('Lon: ' + lon, canvas.width * 0.1, canvas.height * 0.9);
          // context.fillText('Lon: '+lon, canvas.width / 2, canvas.height * 0.8);
          let image = canvas.toDataURL();
          this.attachedImages.push(image);
          this.setValue(name, image);

    };
      }).catch((error) => {
        console.log('Error getting location', error);
      });
    }, (err) => {
      console.log(err);
    });
  }

在字段中设置图像的值： //设置字段中的值

setValue(name, data) {

    console.log(this.attachedImages);
    console.log(this.formType.template.secs); //3
    for (let i = 0; i < this.formType.template.secs.length; i++) {
      console.log(this.formType.template.secs[i].fields); //2
      for (let d = 0; d < this.formType.template.secs[i].fields.length; d++) {
        if (this.formType.template.secs[i].fields[d].name == name) {

          this.attachedImagesArray.push({
            name : this.formType.template.secs[i].fields[d].name,
            image : data,
            number : d
          });


var group_to_values = this.attachedImagesArray.reduce(function (obj, item) {
    obj[item.name] = obj[item.name] || [];
    obj[item.name].push(item.image);
    return obj;
}, {});

var imageGroup = Object.keys(group_to_values).map(function (key) {
    return {key: key, image: group_to_values[key]};
});

var pre = document.createElement("pre");
pre.innerHTML = "imageGroup:\n\n" + JSON.stringify(imageGroup, null, 4);
document.body.appendChild(pre);


var newArr = [];
newArr.push({imageGroup});

for(var item in newArr)
{
  console.log(newArr[item]);
  for(var sec in newArr[item])
  {
    console.log(newArr[item][sec]);
  }

  for( var elm in newArr[item][sec])
  {
    console.log(newArr[item][sec][elm]);
  }

  for( var key in newArr[item][sec][elm])
  {
    this.arrNameStr = newArr[item][sec][elm].key;
    console.log(newArr[item][sec][elm].image);
  }
}

console.log(this.arrNameStr);
if(this.arrNameStr.includes(this.formType.template.secs[i].fields[d].name))
{
  console.log(newArr[item][sec][elm].image);
  console.log(this.formType.template.secs[i].fields[d].value);
  this.formType.template.secs[i].fields[d].value = newArr[item][sec][elm].image;
  console.log(this.formType.template.secs[i].fields[d].value);
}
  }
}
  }
};

Answer 1

首先确保您触发此事件，并且您对模板中幻灯片元素的引用 return 是幻灯片：(ionSlideDidChange)。做：

onSlideChanged() {
    console.log(this.slides)
}

您的控制台应该return引用幻灯片元素。

不清楚你是如何根据你的代码获得这个引用的，但是看到你有 *ngIf 指令，你有可能实际上无法获得它，因为该元素在组件的初始阶段不存在.

要解决这个问题，您可以在 ionSlidesChanged 方法中传递对 ion-slides 的引用：

<div *ngIf="field.value" (click)="takePicture(field.name)">
     <ion-slides #mySlides (ionSlideDidChange)="onSlideChanged(mySlides); mySlides.update()" pager="true" style="max-height:500px">
         <ion-slide *ngFor="let c of field.value">
             <img class="image-attach" [src]="c" draggable="true">
         </ion-slide>
     </ion-slides>
 </div>

现在在实际的方法中你应该能够得到 currentIndex 的值：

onSlideChanged(mySlides) {
    let currentIndex = mySlides..getActiveIndex();
    // here do splice or whatever manipulation you need with your data source / array
}

如果有帮助请告诉我。

更新：由于在更改模型后需要刷新幻灯片 UI，最好调用 "update" 方法：(ionSlideDidChange)="onSlideChanged(mySlides); mySlides.update()".

模板现已更新。

Ionic 3 - 在 .getActiveIndex() 的帮助下从离子幻灯片中删除图像

Ionic 3 - remove images from an ion-slides with help of .getActiveIndex()

javascript

cordova

ion-slides

ionic3