我有一个使用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跟踪(“debut time rdv ****”+ this._reserveDate.reserverStartH);
选项保存在绑定值中,但该字段不显示我选择的时间,但表单文本为蓝色
我必须再次选择我选择的时间吗?