Ionic 4 滑动项 getSlidingRatio 不是函数答案

【问题标题】：Ionic 4 sliding-item getSlidingRatio is not a functionIonic 4 滑动项 getSlidingRatio 不是函数
【发布时间】：2019-02-08 15:46:46
【问题描述】：

我正在尝试使用 (ionDrag) 指令来增加或减少数量，所以我创建了一个看起来像这样的视图：

<ion-item-sliding (ionDrag)="handleSlide($event, tour)">
  <ion-item>
    Drag to add or remove
  </ion-item>
  <ion-item-options side="start">
    <ion-item-option><ion-icon name="remove-circle-outline"></ion-icon></ion-item-option>
  </ion-item-options>

  <ion-item-options side="end">
    <ion-item-option><ion-icon name="add-circle-outline"></ion-icon></ion-item-option>
  </ion-item-options>
</ion-item-sliding>

在控制器中，我写了这段代码：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-places',
  templateUrl: './places.component.html',
  styleUrls: ['./places.component.scss']
})
export class PlacesComponent implements OnInit {
  @Input() tour: any;

  constructor() { }

  ngOnInit() {
  }

  public handleSlide(event: any, tour: any): void {

    const percent: Number = event.getSlidingRatio();

    console.log('Slide ' + event.type + ' : ' + percent);
    if (percent > 0) {
      this.increment();
    } else {
      this.decrement();
    }
  }

  private increment(): any {
    console.log('Up');
  }

  private decrement(): any {
    console.log('Down');
  }
}

但是当我拖动元素时，控制台返回一个 TypeError e.getSlidingRatio is not a function。

我正在使用 Ionic 4 并根据更新文档将 getSlidingPercent 替换为 getSlidingRatio。

尝试将事件提示为 CustomEvent 但... getSlidingRatio() 在此类型上不存在...与 CustomEvent 相同

所以我的问题...我对这段代码做错了什么？

【问题讨论】：

根据github.com/ionic-team/ionic/blob/master/core/src/components/…你应该访问event.ratio
Thx... 但是，event.ratio 值似乎未定义...以及数量...只需替换我的控制台以查看包含“事件”的内容并获取 {"isTrusted": false}，所以，我认为“事件”没有按预期传输

标签： angular progressive-web-apps ionic4

【解决方案1】：

我遇到了一些问题，在其中一个 beta 版本中我根本无法访问它，但在最新版本 (4.0.0 / 4.0.1) 中至少仍然需要解决方法为了我。我的版本是：

"@ionic-native/core": "^5.0.0",
"@ionic/angular": "^4.0.0",

ionic cli: 4.10.2

这样，像你一样传递事件，但我找到了关注 issue 我需要黑入 details。因此，当 console.logging $event 时，它输出包含一个对象 details，具有 ratio 属性，所以这解决了我的问题：

<ion-item-sliding (ionDrag)="handleSlide($event)">
  <!-- ... -->
</ion-item-sliding>

TS：

handleSlide(event: any) {    
  let ratio = event.detail.ratio;
  console.log(ratio);
}

检查您的版本控制，希望对您有所帮助！

【讨论】：

【解决方案2】：

ion-item-sliding 的getSlidingRatio 方法返回一个promise，所以你不能将它直接赋值给一个变量。

handleSlide(event, tour) {
    event.target.getSlidingRatio().then(res => {
        let ratio = res;
        console.log(ratio);
    });
}

【讨论】：

【解决方案3】：

首先：在 HTML 中，您必须在 ion-item-sliding 中添加一个别名 #sliding

第二：在您的 TS 中，在导出行之后使用ViewChild：

  @ViewChild('sliding', { static: false }) sliding: IonItemSliding;

  // {static: false} make the difference

第三：在你的函数中使用getSlidingRatio()方法

    this.sliding.getSlidingRatio()
   .then( val => {
     console.log({val});
   })
   .catch(err => {
     console.log({err});
   });

【讨论】：