Заполнение значений в выпадающих списках с помощью ngmodel, angular 8

Question

У меня есть два раскрывающихся списка: время начала и время окончания, первое раскрывающееся меню использует массив времени, где выбирается время, а затем индекс этого времени используется для среза, а массив создается для второго раскрывающегося списка. Так что время окончания всегда больше времени начала.

Здесь я пытаюсь установить значения по умолчанию при нажатии кнопки отправки, но когда я нажимаю кнопку отправки, тогда я

1. не получая заданное значение времени начала, оно отображается пустым и
2. получает значение времени окончания в раскрывающемся списке, но в массиве раскрывающихся значений также отображаются значения времени, меньшие времени начала.

template

   Start at:
                <select
                [(ngModel)]="time1"
                (change)="onSelect($event.target.value)"   id="fTime">
                 <option value="0" selected>Select</option>
                  <option  [value]="i" *ngFor="let type of startTimeArray; let i = index">
                    {{type}}
                  </option>
               </select>
               End at:
              <select 
               [(ngModel)]="time2"
               id="tTime">
                 <option value="0" selected>Select</option>
                  <option [value]="type" *ngFor="let type of tempEndTimeArray">
                    {{type}}
                  </option>
              </select>


<div><button   (click)="submit()">click</button></div>

TS

import { Component } from "@angular/core";
import { FormGroup, FormArray, FormBuilder, FormControl } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  forTableArray: any = [];
  time1:any=[];
  time2:any=[];
  startTimeArray:any=["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];
  endTimeArray:any=["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];
  public tempEndTimeArray: Array<any>;

  public enableEndTime: boolean = true;
  submit(){
this.time1="";
this.time2="";
this.tempEndTimeArray =this.startTimeArray;
this.time1="7:00 AM";
this.time2="5:00 PM";
  }
public onSelect(val){
  console.log(val)
  let index = parseInt(val) + 1;
  console.log(index)
   this.tempEndTimeArray = this.endTimeArray.slice(index);

}
  convertTime12to24(time12h) {
    const [time, modifier] = time12h.split(" ");
    let [hours, minutes] = time.split(":");
    if (hours === "12") {
      hours = "00";
    }
    if (modifier === "PM") {
      hours = parseInt(hours, 10) + 12;
    }
    return `${hours}:${minutes}`;
  }
}

Кроме того, я не могу получить выбранное значение времени в моей консоли, например, если выбрано 01:00 PM из в раскрывающемся списке, я хочу, чтобы он отображался в консоли, вместо этого я получаю значение индекса (как я установил [value] = i, в моем html выберите раскрывающемся, чтобы я мог использовать слайс для времени)

https://stackblitz.com/edit/angular-r2sv3k

Answer 1

Мое решение, переосмыслите свой дизайн

app.component.ts

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  public startDate: Date;
  public endDate: Date;

  public readonly availableDates: Date[] = [
      new Date(2020, 4, 13, 10),
      new Date(2020, 4, 13, 11),
      new Date(2020, 4, 13, 12),
      new Date(2020, 4, 13, 13),
      new Date(2020, 4, 13, 14),
      new Date(2020, 4, 13, 15),
    ];

  get availableEndDates() {
      if(this.startDate == undefined) return[];
      const timeStampStart = new Date(this.startDate).getTime();
      return this.availableDates.filter(d =>  {
        const timeStampEnd = new Date(d).getTime();
        return timeStampStart < timeStampEnd;
      });
  }

  public submit() {
      if(this.startDate == undefined) this.startDate = this.availableDates[0]
  }

}

app.component. html

Start at:
<select [(ngModel)]="startDate">
  <option [value]="undefined">No date selected</option> 
  <option [value]="date" *ngFor="let date of availableDates">
    {{date | date:'hh:mm aaaa'}}
  </option>
</select>

End at:
<select [(ngModel)]="endDate" [disabled]="startDate == undefined">
  <option [value]="undefined">No date selected</option> 
  <option [value]="date" *ngFor="let date of availableEndDates">
      {{date | date:'hh:mm aaaa'}}
  </option>
</select>

<button (click)="submit()">click</button>

Answer 2

У вас есть несколько вопросов. Вместо того, чтобы подробно описывать их, я покажу вам свою версию кода и опишу, что я сделал.

компонент. html

Start at:
<select [(ngModel)]="time1" (ngModelChange)="onTime1Change()">
  <option [ngValue]="-1">Select</option>
  <option  [ngValue]="i" *ngFor="let time of startTimes; let i = index">
    {{time}}
  </option>
</select>

End at:
<select [(ngModel)]="time2">
  <option [ngValue]="-1">Select</option>
  <option [ngValue]="i" *ngFor="let time of endTimes let i = index">
    {{time}}
  </option>
</select>

В HTML, я использую [ngValue] для привязки значений параметров вместо [value]. [ngValue] связывает само значение, тогда как [value] всегда использует строковое представление. Вы хотите использовать индекс в качестве значения параметра (число), поэтому следует использовать [ngValue].

Кроме того, я использую значение -1 для параметра заполнителя. Это сделано для того, чтобы избежать sh между Select и первым элементом в массиве.

Поскольку вы используете [(ngModel)], вы можете использовать (ngModelChange) для обнаружения изменений значений. И поскольку вы используете двустороннюю привязку, вам не нужно передавать значение в обработчик событий - модель уже обновлена.

component.ts

time1 = -1;
time2 = -1;

startTimes = ["07:00 AM","08:00 AM", "09:00 AM", "10:00 AM", "11:00 AM", "12:00 PM",
  "1:00 PM",  "2:00 PM", "3:00 PM",  "4:00 PM", "5:00 PM",  "6:00 PM", "7:00 PM", "8:00 PM"];    
endTimes: string[];

ngOnInit() {
  this.endTimes = this.startTimes.slice();
}

onTime1Change() {
  if (this.startTimes.indexOf(this.endTimes[this.time2]) <= this.time1) {
    this.time2 = -1;
  }

  let sliceIndex;
  if (this.time1 >= 0) {
    sliceIndex = this.time1 + 1;
  }

  this.endTimes = this.startTimes.slice(sliceIndex);
}

time1 и time2 привязаны к полям <select>, поэтому их тип данных должен соответствовать типам значений <option>. Я инициализирую их значением -1, чтобы Select казалось выбранным по умолчанию.

Нет необходимости в endTimeArray и tempEndTimeArray - вы всегда можете взять копию с startTimeArray. Я также объявил их правильные типы данных. Я инициализирую endTimeArray в ngOnInit().

onTime1Change() выполняет всю тяжелую работу здесь. Он выполняет следующие действия:

1. Сброс time2, если time2 <= <code>time1. Помните, что endTimes может быть срезом, поэтому вы должны найти исходный индекс значения time2 в startTimes.

2. Установить индекс среза, если time1 имеет значение

3. Set endTimes

DEMO: https://stackblitz.com/edit/angular-sae1jr