nouislider angular 2 格式工具提示

Question

我想将工具提示值从秒数转换为日期。但有一个问题，有一个初始日期 (startTime)，我想将工具提示值（秒）添加到该日期，并在工具提示中显示它。

也就是说，如果我的初始时间是05:00:00并且我移动左手柄5秒，它应该显示05:00:05。

工具提示中的格式有效，我已设法将值更改为日期，甚至向其添加字符串。

我在 Angular 2 中工作，~~当我调用方法 this.formatTooltipTimeDate(value) 时，出现错误。~~

~~ERROR TypeError: Cannot read property 'formatTooltipTimeDate' of undefined~~

@Stefan Svrkota 建议的更改现在正在运行，但是，现在我只能在两个工具提示中看到 "undefined"。

我在控制台中添加了一条消息，在那里我可以看到日期格式正确为字符串，但返回的值仍未定义。

工具提示配置：

component.ts

    this.sliderConfig = {
      start: 0,
      connect: true,
      range: {
        min: 0,
        max: rangeTime
      },
      format: {
        from: Number,
        to: (value) => {                    
          this.formatTooltipTimeDate(value).subscribe(
            data => {
              console.log('new tooltip format ', data);
              return data;
            }
          );
        }
      },
      step: 1
    };


  formatTooltipTimeDate(seconds): Observable<string>{
    let t = new Date(this.startTime);
    let newDate;
    t.setSeconds(t.getSeconds() + seconds);

        // Formate Date: HH:MM:SS
        let hour = this.formatTwoDigits(t.getHours());
        let minute = this.formatTwoDigits(t.getMinutes());
        let second = this.formatTwoDigits(t.getSeconds());
        newDate = hour + ':' + minute + ':' + second;
        return Observable.of(newDate);
  }

component.html

  <nouislider class="nouislider" [config]="sliderConfig" [tooltips]="[ true, true ]" [(ngModel)]="someRange" (change)="event($event)"></nouislider>

Answer 1

我发现，问题是 return 字符串作为可观察对象。

我这样改了格式（我不再订阅了）：

  format: {
    from: Number,
    to: (value) => {   
      let t = new Date(this.startTime);
      t.setSeconds(t.getSeconds() + value);   
      return this.formatTooltipTimeDate(t);
    }        
  }

方法 formatTooltipTimeDate 不再 return 可观察：

  formatTooltipTimeDate(date){
        // Formate Date: HH:MM:SS
        let hour = this.formatTwoDigits(date.getHours());
        let minute = this.formatTwoDigits(date.getMinutes());
        let second = this.formatTwoDigits(date.getSeconds());
        date = hour + ':' + minute + ':' + second;

        return date;
  }

nouislider angular 2 格式工具提示

nouislider angular 2 format tooltips

format

slider

tooltip

nouislider

angular