Angular 在下拉选择选项上设置字体样式

我想创建一个字体选择器列表，并根据它所代表的列表中的项目字体为我的选择设置样式。不幸的是，我不知道如何让它工作，我已经设置了样式，但它没有呈现选定的字体。我还能做些什么来相应地渲染这些项目吗

我的代码

fonts = ['Nunito Sans', 'Poppins', 'Avenir Next Medium'];
navbarBrandFont = 'Nunito Sans';

<select [(ngModel)]="navbarBrandFont" class="form-control form-control-lg">
  <option *ngFor="let font of fonts | ssort"
          [attr.selected]="font == navbarBrandFont ? true : null" [ngStyle]="{ 'font-family': font }">{{ font }}</option>
</select>

font=['Nunito Sans'、'Poppins'、'Avenir Next Medium'；
navbarBrandFont='Nunito Sans'；
{{font}}

选择标签不能在下拉列表中显示，因为它不可自定义。您必须使用div ul和li创建自己的自定义标签

如链接中所示，他没有使用并选择tag

这里是代码使用

<div ng-app="fdApp">
  <div class="font-dropdown" tabindex="1" fd-font-dropdown>
    <span class="label" ng-style="{{'fontslist[selectedIdx].style'}}">{{fontslist[selectedIdx].name}}</span>
  <ul class="dropdown-list">
      <li ng-repeat="font in fontslist" ng-click="changeFont($index)" ng-class="{'sel': $index == selectedIdx}" ng-style="{{font.style}}">
          {{font.name}}
      </li>
  </ul>
  </div>
</div>

{{fontslist[selectedIdx].name}


{{font.name}