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] to 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>

组件ts

  brandFont: any; 
  defaultFont: any;

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

这是一个演示stackblitz