nouislider angular 2 подсказки формата - PullRequest
Новая
       19

nouislider angular 2 подсказки формата

0 голосов
/ 13 июня 2018

Я хочу преобразовать значения всплывающей подсказки из секунд в дату.Но есть подвох, есть начальная дата (startTime), и я хочу добавить значения всплывающей подсказки (секунды) к этой дате и показать ее во всплывающей подсказке.

То есть, если мое начальное время равно 05: 00: 00 и я перемещаю левую ручку на 5 секунд, она должна показывать 05: 00: 05.

Формат во всплывающих подсказках работает, мне удалось изменить значение как дату или даже добавить строки

Я работаю в Angular 2, , когда я вызываю метод this.formatTooltipTimeDate(value), я получаю сообщение об ошибке.

ОШИБКА TypeError: Cannot read property 'formatTooltipTimeDate '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>

1 Ответ

0 голосов
/ 13 июня 2018

Я обнаружил, что проблема заключалась в возвращении строки как наблюдаемой.

Я изменил формат следующим образом (я больше не делаю подписку): 

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

Метод formatTooltipTimeDate больше не возвращает наблюдаемое: 

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