Angular 4在Dropdown中设置选项

问题描述：

关于此问题和不同答案的几个问题。但是他们都没有真正回答这个问题。所以再次：Angular 4在Dropdown中设置选项

设置默认的下拉选择按值不是在我的情况下工作。为什么？这是从4角的动态表单教程：

<select [id]="question.key" [formControlName]="question.key"> 
     <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected">{{opt.selected+opt.value}}</option> 
</select>

它不选择任何内容。可用的选项有：

trueaaa
falsebbb
falseccc

但静态真：

<option ... [selected]="true">...</option>

选择的最后一个值（全真）。它也适用于一个私有变量boolvar = true并使用它[selected]="boolvar"

我不明白“opt”对象和类变量之间的区别？

试试..... [选择] = “opt.selected真？假”> –

哎格雷戈尔请尝试[选择] =“opt.selected = =真“为我的工作。 –

！圣****！有用！：D谢谢......可惜我还是不明白引擎盖下发生了什么。 –

答

如果你想基于真/假使用选择一个值

[选择] = “opt.selected ==真”

<option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected == true">{{opt.selected+opt.value}}</option>

checkit出

Angular 2 - Setting selected value on dropdown list

呃...对我很有用。即使它很脏。只要我不明白引擎盖下发生了什么，它对我来说是最好的解决方案。你的 –

答

如果你想选择一个值作为默认情况下，在你的表单生成器给它一个值：

this.myForm = this.FB.group({ 
    mySelect: [this.options[0].key, [/* Validators here */]] 
});

现在，在你的HTML：

<form [formGroup]="myForm"> 
    <select [formControlName]="mySelect"> 
     <option *ngFor="let opt of options" [value]="opt.key">ANY TEXT YOU WANT HERE</option> 
    </select> 
</form>

什么我的代码所做的是给你的选择一个值，等于您的选项列表的第一个值。这是您在Angular中选择默认选项的方式，所选内容无用。

答

从选项标签中删除[selected]：

<option *ngFor="let opt of question.options" [value]="opt.key"> 
    {{opt.selected+opt.value}} 
</option>

而在你的表单生成器插件：

key: this.question.options.filter(val => val.selected === true).map(data => data.key)

Angular 4在Dropdown中设置选项

相关推荐