Angular 6 HTML выберите меню установить значение по умолчанию

Question

Я привык к старому способу angularjs выбирать меню, выбирать значение по умолчанию и т. Д., И у меня возникают проблемы, когда я пытаюсь понять, как это сделать в Angular (6).

У меня есть массив пунктов меню:

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

и переменная для хранения выбранного шрифта: brandFont

Мое HTML-меню:

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

Меню работает, отображает мой fontChoices, а изменение выбора запускает мою функцию. Я могу выбрать Georgia или Trebuchet, и переменная css изменится, и страница обновится как следует.

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

При загрузке страницы переменная css имеет значение Trebuchet. Который я могу получить в ngOnInit с

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

У меня вопрос, как мне заставить меню выбора на отображать этот первый выбор при загрузке страницы? Я пробовал this.brandFont = this.fontChoices[0];, но выбранный пункт меню пуст, пока что-то не выбрано из меню.

Answer 1

Просто измените свое утверждение

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

https://angular -qlr8fj.stackblitz.io

Answer 2

Используйте опцию с первым значением, подобным этому <option [value]="defaultFont.label" selected="selected">{{defaultFont.label}}</option>

Компонент 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>

Компонент ц

  brandFont: any; 
  defaultFont: any;

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

Вот демо-стек