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