Cuando estaba cargando valores predeterminados en ngOnInit en angular, usando formularios reactivos angulares, los valores predeterminados que estaba configurando en ngOnInIt no se reflejan. Estoy usando filter dentro del mapa.
Según la URL, necesito que el valor en el mapa se seleccione de forma predeterminada en el menú desplegable. Cualquier ayuda es apreciada.
tMap = [ { url:"test", Name:'rony' }, { url:"cool", Name:'rocky' } ]; ngOnInit() { this.loginForm.controls['hub'].setValue('rony'); this.url = (window.location.href).substring(22,26); const selectedHub: { url:string, Name: string } = this.tMap.filter(ele => ele.url == this.url)[0]; this.loginForm.controls['hub'].setValue(selectedHub.Name); }Código HTML:
<div> <select formControlName="hub" ng-model="hub" id="login" class="form-control ng-pristine ng-valid ng-touched" style="font-family: Arial; font-size: 12px; background-color: white; font-weight: 600"> <option *ngFor="let h of tMap"><a [href]="h.url">{{h.Name}}</a></option> </select> </div>Te falta [value] en tu opción de selección:
<option *ngFor="let h of tMap" [value]="h.Name"> <a [href]="h.url">{{ h.Name }}</a> </option> Con eso, Angular ahora sabe a qué vincularse. Además, elimine ng-model de select , en primer lugar, es la sintaxis de AngularJS, en segundo lugar, ya está usando el control de formulario, por lo que no es necesario usar [(ngModel)] (que es la sintaxis de Angular).