Javascript 角度6 HTML选择菜单设置默认值

我已经习惯了angularjs的老方法，比如选择菜单，选择默认值等等，我很难在angularjs（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>

在页面加载时，css变量设置为Trebuchet。我可以用它进入ngOnInit

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

---

我的问题是，如何让选择菜单在页面加载时显示此第一选择？我尝试了

this.brandFont=this.fontschoices[0]

但在从菜单中选择某个内容之前，所选菜单项为空。

使用具有第一个值的选项，如

{{defaultFont.label}

组件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>

---

这是一个

只要改变你的一句话

this.brandFont=this.fontChoices[0]

到

this.brandFont=this.fontChoices[0]。值

这给了我两个投石机，从菜单中选择一个项目使其变为空白。即使在StackBlitz上修复了副本，但在菜单上选择一个项目后，菜单中的选定项目为空。如果你再打开菜单，投石机就不见了。实际上，下面的答案@rohit.007非常有效，只需在我拥有的内容上添加6个字符。
<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);
  }