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。我可以通过{p>进入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

Angular 6 HTML选择菜单设置默认值

2 个答案: