nouislider angular 2格式工具提示

Question

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

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

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

当我调用方法this.formatTooltipTimeDate(value)时，我正在使用Angular 2，，我收到错误。

<击>   

ERROR TypeError：无法读取属性'formatTooltipTimeDate'的   未定义   

现在这是由@Stefan Svrkota提出的改变，但是，现在我只能在两个工具提示中看到“未定义”。

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

工具提示配置：

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

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

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

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

方法formatTooltipTimeDate不再返回observable：

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