Angular (2/4/5/6) Преобразовать массив временных интервалов во временной диапазон - PullRequest
Новая
       16

Angular (2/4/5/6) Преобразовать массив временных интервалов во временной диапазон

2 голосов
/ 24 апреля 2019

Привет, спасибо за все ваши ответы!Вот мое обновленное решение, основанное на ваших данных.Спасибо! 

getTime(apptTime) {
   const fields = apptTime.split("-");
   const startingTime = this.formatTime(+fields[0]);
   const endingTime = this.formatTime(+fields[1]);

   return startingTime + " - " + endingTime;
}

formatTime(time) {
    if (time < 12) {
      return time === 0 ? "12am" : time + "am";
    } else {
      return time === 12 ? time + "pm" : time - 12 + "pm";
    }
  }

У меня есть строковый массив => appt_timeslots = ["09-12", "12-15", "15-18", "18-21"] Это получено из бэкэнда, и я хотел бы отображать его в виде переключателей, например, так:

enter image description here

appt.component.html 

<ng-container *ngFor="let appt of appt_timeslots" [ngSwitch]="appt">
   <label ngbButtonLabel class="btn btn-secondary active btn-radio btn-color">
      <input ngbButton type="radio" name="timeslot" value="{{ appt }}"/>
         <span *ngSwitchCase="'09-12'">9am - 12pm</span>
         <span *ngSwitchCase="'12-15'">12pm - 5pm</span>
         <span *ngSwitchCase="'15-18'">3pm - 6pm</span>
         <span *ngSwitchCase="'18-21'">6pm - 9pm</span>
   </label>
</ng-container>

Есть ли лучший способ получить мои временные интервалы, чтобы я мог отображать am / pm и тире вместо использования переключателя?
Чтобы он мог обслуживать и другие временные интервалы (Например, 14:00 - 16:00) и мне не нужно вручную добавлять еще один корпус переключателя для обслуживания нового.
Благодарим вас за помощь!

Ответы [ 2 ]

3 голосов
/ 24 апреля 2019

Мне нравится использовать Pipe для преобразования, этот не проверяет формат, но будет работать для вас 

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'timeslot'
    })
    export class TimeslotPipe implements PipeTransform {

      transform(value: string): any {
        const times = value.split('-');
        return `${this.generateTimeString(times[0])} - ${this.generateTimeString(times[1])}`;
      }

      private generateTimeString(hourValue: string): string {
        const suffix = +hourValue - 12 > -1 ? 'pm' : 'am';
        const twelveFormat = +hourValue - (suffix === 'pm' ? 12 : 0);
        return `${twelveFormat}${suffix}`;
      }
    }

и .html 

<p *ngFor="let slot of timeslots">{{slot | timeslot}}</p>
2 голосов
/ 24 апреля 2019

Вот возможный подход.

Сначала я сохраняю данные бэкэнда как они есть.

Затем я создам объект с внутренними данными в качестве значения и отображаемым текстом на основе значения.Например, для элемента бэкэнд-массива '09-12' я создаю объект {value:'09-12', text: '9am-12pm'}

Ваш файл ts: 

 backendData =  ["09-12", "12-15", "15-18", "18-21"] //Data from the backend
 appt_timeslots = []  //This will be our object

 //I do the rest in ngOnInit but that's just for the example.
 ngOnInit() { 

    this.backendData.forEach(e => {
      var text = this.getTextFromValue(e);
      this.appt_timeslots.push({value: e, text: text});
    })
    console.log(this.appt_timeslots);
  }

 getTextFromValue(value:string){

    var timeSlots = value.split("-");
      var formattedTime = timeSlots.map(time => {
        time = this.setAMorPM(time);
        return time
      });

      var result = formattedTime.join("-")
      return result
  }

  setAMorPM(number: string){

    if(parseInt(number) > 12)
      number = (parseInt(number) - 12).toString() + 'pm';
    else
      if(parseInt(number) == 0)
        number = "12am"
      else  
        if(number[0]=='0')
        {
          number = number.slice(1);
          number += 'am';
        }

    return number
  }

Мы создаем объект на основе данных бэкэнда для каждого элементаи поместите его в массив объектов (appt_timeslots).

Две функции getTextFromValue() и toAMorPM() служат только для создания текста на основе значения, я разделил их для удобства чтения.

Ваш HTML-файл:

Теперь вам просто нужно пройтись по массиву объектов и, при необходимости, интерполировать значение или текст, например: 

<ng-container *ngFor="let appt of appt_timeslots" [ngSwitch]="appt.value">
  <label ngbButtonLabel class="btn btn-secondary active btn-radio btn-color">
     <input ngbButton type="radio" name="timeslot" value="{{ appt.value }}"/>
        <span *ngSwitchCase="appt.value">{{appt.text}}</span>
  </label>
</ng-container>

Примечание. Функции, вероятно, могут быть написаны более кратко, ноЯ думаю, что подход имеет смысл.

...