Ionic 3 - удалить изображения с ион-слайдов с помощью .getActiveIndex ()

Я добавил изображения из галереи/камеры на просмотр слайдера. У меня есть лист действий, который дает мне возможность добавлять или удалять изображения из представления слайдера. Добавление работает отлично, поскольку я добавляю это изображение в массив и обеспечивая это обновленный массив для ползунка. Но для удаления изображения мне нужно получить индекс изображения, который активен на слайдере, и после этого мне нужно его удалить. Я не могу получить активный индекс, используя этот код:

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

это также входит в ловушку. Затем im удаляет первый элемент из массива и обновляет массив для слайдера. Размер массива уменьшается, когда я нажимаю кнопку удаления из листа действий, но все изображения в слайдере исчезают, оставляя пустое пространство.

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

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

для размещения изображений на слайдах im, используя следующий код:

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