мою форму материала нужно выбрать 2 раза

Question

У меня есть форма, выбранная с Angular Material, но я должен выбрать 2 раза снова, чтобы показать выбранное время.

HTML-код компонента:

<mat-form-field>
  <mat-select [(value)]="_reserveDate.reserverStartH" (change)="reserverStartH(_reserveDate.reserverStartH)" placeholder="debut du rendez-vous">
    <mat-option>None</mat-option>
    <mat-option value="8">8H</mat-option>
    <mat-option value="9">9H</mat-option>
    <mat-option value="10">10H</mat-option>
    <mat-option value="11">11H</mat-option>
    <mat-option value="12">12H</mat-option>
    <mat-option value="13">13H</mat-option>
    <mat-option value="14">14H</mat-option>
    <mat-option value="15">15H</mat-option>
    <mat-option value="16">16H</mat-option>
    <mat-option value="17">17H</mat-option>
    <mat-option value="18">18H</mat-option>
    <mat-option value="19">19H</mat-option>
    <mat-option value="20">20H</mat-option>
    <mat-option value="21">21H</mat-option>
    <mat-option value="22">22H</mat-option>
    <mat-option value="23">23H</mat-option>
    <mat-option value="24">24H</mat-option>
    <mat-option value="0">00H</mat-option>
    <mat-option value="1">1H</mat-option>
    <mat-option value="2">2H</mat-option>
    <mat-option value="3">3H</mat-option>
    <mat-option value="4">4H</mat-option>
    <mat-option value="5">5H</mat-option>
    <mat-option value="6">6H</mat-option>
    <mat-option value="7">7H</mat-option>
  </mat-select>
</mat-form-field> 

import { Component, OnInit } from '@angular/core';
import { VisiteurService } from '../visiteur.service';
import { HttpClient } from '@angular/common/http';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import { MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CalendarModel } from './calendar-model';
import { CalendarService } from './calendar.service';
import { MockNgModuleResolver } from '@angular/compiler/testing';

import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/catch'
import 'rxjs/add/observable/throw'

interface JourDispo {
  jour: string;
  dispo: number; //0 dispo; 1 indispo
}

@Component({
  selector: 'app-calendrier',
  templateUrl: './calendrier.component.html',
  styleUrls: ['./calendrier.component.css'],
  providers: [CalendarModel, CalendarService, VisiteurService], //on demande automatiquement d'instancier le modèleclendar modele
})

export class CalendrierComponent implements OnInit {

  public jwtObs: Observable<any>;

  public wbsServeur: string = "url ...";
  public wbsCalendar: string = "url ...";
  public semaine: object;

  public matDatepicker = "date non défini"; //cette attribut sert juste à afficher Wed Apr 11 2018 00:00:00 GMT+0200 (Paris, Madrid (heure d’été))
  public heureDeb = 0;
  public heureFin = 0;

  public toDoDates;
  public dateDispo = true;

  public erreur: string = "pas d'erreur";
  public debug = true;

  public currentRDV = null;

  constructor(private _http: HttpClient, private _visiteur: VisiteurService,
    private dateAdapter: DateAdapter<Date>, public _reserveDate: CalendarModel, public _calendarService: CalendarService) {
    this.debug ? this.calendarDebug() : null;

  }

  sendRDV() { //après avoir cliquer sur prendre rendez-vous, envoie les info de la demande de rendez-vous
    this._visiteur.getWbsJwt().subscribe(jwt => { //recupère le jeton
      this._reserveDate.setJwt(jwt);//injecte le jeton dans son modèle calendrier
      this._calendarService.sendWbsRdv(this._reserveDate).subscribe(//demande d'envoyer par la méthode post
        retour => {//récupérer le retour
          console.log(retour);
         this._reserveDate.idReserver = retour.resultat;
       // console.log("****"+this._reserveDate.idReserver,retour.resultat);
        }
      );
    });//recupere le jeton sous forme d'observable
  }

  verifRDV() {

  }
  calendarDebug() {
    console.log("******* DEBUG CALENDRIER COMPOSANT ***** ");
    console.log("0 => date de prise de rendez-vous :" + this._reserveDate.saisieQuant);
  }

  ngOnInit() {
  }

  getTodoDate() {
    this._http.get(this.wbsCalendar).subscribe(
      data => {
        this.toDoDates = data;
        console.log(data+"todo data ***");
      }
    )
  }

  getDispo() {
    this._http.get(this.wbsServeur).subscribe(
      data => {
        this.semaine = data;
      }
    )
  }

  reserverAvecQui() { //enregistrement du nom, prénom, nom de salle ou autre
    this._reserveDate.reserverAvecQui;
  }

  reserverWhy() {
    this._reserveDate.reserverWhy;
  }

  reserverDate($event) {
    this._reserveDate.reserverDate = $event.getTime() * 0.001; //enregistrerment timestamps de la date picker
    this.matDatepicker = $event; //sauvegarde de la date entière pour juste  l'afficher
  }

  reserverStartH(debut) {
    this.heureDeb = debut;
    this._reserveDate.reserverStartH = this._reserveDate.reserverDate + debut * 60 * 60;
    console.log("debut time rdv" + this._reserveDate.reserverStartH);
  }

  reserverEndH(fin) {
    this.heureFin = fin;
    this._reserveDate.reserverEndH = this._reserveDate.reserverDate + fin * 60 * 60;
    if (this._reserveDate.reserverEndH < this._reserveDate.reserverStartH) {
      this.erreur = "l'heure doit être supérieur à l'heure de début !";
    }
    console.log("fin time rdv" + this._reserveDate.reserverEndH);
  }
}

Почему я должен выбратьвыбран 2 раза?я отслеживаю с console.log («время дебюта rdv ****» + this._reserveDate.reserverStartH);

выбор сохраняется в значении привязки, но поле не показывает время, которое я выбрал,но текст формы синий

Я должен выбрать снова, чтобы у меня был выбран час времени?