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>

组件 ts

  brandFont: any; 
  defaultFont: any;

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

这是demo stackblitz