角度 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，更改选择会触发我的函数。 我可以选择格鲁吉亚或投石机，css 变量会更改，页面会按预期更新。

setStyle(e, which) {
document.documentElement.style.setProperty(which, e);
}

在页面加载时，css 变量设置为投石机。 我可以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>

组件网页

<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);
}

这是一个演示堆栈闪电战