Ionic2，范围引脚的离子范围自定义内容 [英] Ionic2, ion-range custom content of the range pin

问题描述

我使用离子范围与 pin 和步骤。我得到范围引脚中的当前值，但我想在它旁边添加/附加一些文本。

I am using ion-range with pin and steps. I get the current value in the range pin, but I want to add/append some text next to it.

到目前为止离子API和docs我没有找到修改范围引脚内容的方法，所以我想通过代码附加一个span，但到目前为止我知道从jQuery使用.append（）函数。
范围引脚的html是：

So far in ionic API and docs I did not find a way to modify the content from the range pin, so I am thinking on maybe appending a span via the code, but so far I know to use .append() function from jQuery. The html of the range pin is:

<div class="range-pin" role="presentation">1</div>

所以我想表现出来：

<div class="range-pin" role="presentation">1 item</div>

推荐答案

这是我的解决方案。

注意：我把它放在ionViewDidEnter里面。

Note: I put this inside ionViewDidEnter.

this._elementRef.nativeElement
  .querySelector('.range-knob-handle')
  .addEventListener('pointermove', function () {
    const value = this.getAttribute('aria-valuenow');
    this.querySelector('.range-pin').textContent = `${value} hours`;
  });

所以这里的主要内容是const值是在范围内选择的值。之后你可以用它做任何你想做的事情，只需设置范围引脚的textContent来修复文本。

So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.

这篇关于Ionic2，范围引脚的离子范围自定义内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！