web-dev-qa-db-fra.com

Angular 6 Le menu de sélection HTML définit la valeur par défaut

Je suis habitué à l’ancienne méthode angularjs consistant à sélectionner les menus et à sélectionner la valeur par défaut, etc., et j’ai du mal à comprendre comment procéder dans Angular (6).

J'ai un tableau d'éléments de menu:

  fontChoices = [
    {
      label: 'Trebuchet',
      value: "'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif"
    },
    {
      label: 'Georgia',
      value: 'Georgia, times, serif'
    }
 ];

et une variable pour contenir la police choisie: brandFont

Mon menu html est

<select [(ngModel)]="brandFont"
        id="brandFontmenu"
        (ngModelChange)="setStyle($event,'--font-family-brand')">
   <option *ngFor="let font of fontChoices"
           [value]="font.value">{{font.label}}
   </option>
</select>

Le menu fonctionne, affiche mon fontChoices, et la modification de la sélection déclenche ma fonction. Je peux choisir Georgia ou Trebuchet et la variable css change et la page se met à jour comme il se doit.

  setStyle(e, which) {
    document.documentElement.style.setProperty(which, e);
  }

Lors du chargement de la page, la variable css est définie sur Trebuchet. Que je peux obtenir dans ngOnInit avec

this.brandFont = String(styles.getPropertyValue('--font-family-brand')).trim();

Ma question est, comment puis-je obtenir le menu de sélection pour afficher ce premier choix au chargement de la page? J'ai essayé this.brandFont = this.fontChoices[0]; Mais l'élément sélectionné dans le menu est vide jusqu'à ce que quelque chose soit choisi dans le menu.

javascripthtmlangular
7
Steve

Il suffit de changer votre déclaration

this.brandFont = this.fontChoices[0] à this.brandFont = this.fontChoices[0].value;

https://angular-qlr8fj.stackblitz.io

5
Rohit.007

Utilisez une option avec la première valeur comme ceci <option [value]="defaultFont.label" selected="selected">{{defaultFont.label}}</option>

Composant HTML 

<select [(ngModel)]="brandFont"
        id="brandFontmenu"
        >
   <option [value]="defaultFont.label" selected="selected">{{defaultFont.label}}
   </option>
   <option *ngFor="let font of fontChoices.slice(1)"
           [value]="font.label">{{font.label}}
   </option>
</select>

Composant ts 

  brandFont: any; 
  defaultFont: any;

  ngOnInit() {
    this.defaultFont = this.fontChoices[0];
    this.brandFont = Object.assign(this.defaultFont.label);
  }

Voici un demo stackblitz

3
Abel Valdez