Dropular中的Angular 4设置选定选项

several questions about this and diffrent answeres. But none of them realy answeres the question. So again:

关于这个和不同的答案的几个问题。但他们都没有回答这个问题。再说一遍:

Setting default of a Dropdown select by value isnt working in my case. why? This is from the dynamic Form tutorial of Angular 4:

在我的情况下,设置默认的下拉列表选择值不起作用。为什么?这是来自Angular 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>

It doesnt select anything. Available options are:

它没有选择任何东西。可用选项包括:

trueaaa
falsebbb
falseccc

But static true:

但静态是真的:

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

selects the last value (all true). It also works with a private variable boolvar = true and using it in [selected]="boolvar"

选择最后一个值(全部为真)。它也适用于私有变量boolvar = true并在[selected] =“boolvar”中使用它

I dont understand the difference between the "opt" object and the class variable??

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

4 个解决方案

#1

-1

If you want to select a value based on true / false use

如果要根据true / false使用选择值

[selected]="opt.selected == true"

[selected] =“opt.selected == true”

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

checkit out

Angular 2 - Setting selected value on dropdown list

Angular 2 - 在下拉列表中设置选定的值

#2

Here is my example:

这是我的例子:

<div class="form-group">
    <label for="contactMethod">Contact method</label>
    <select 
        name="contactMethod" 
        id="contactMethod" 
        class="form-control"
        [(ngModel)]="contact.contactMethod">
        <option *ngFor="let method of contactMethods" [value]="method.id">{{ method.label }}</option>
    </select>
</div>

And in component you must get values from select:

在组件中,您必须从select中获取值:

contactMethods = [
    { id: 1, label: "Email" },
    { id: 2, label: "Phone" }
]

So, if you want select to have a default value selected (and proabbly you want that):

因此,如果您希望select选择一个默认值(并且您希望这样做):

contact = {
    firstName: "CFR",
    comment: "No comment",
    subscribe: true,
    contactMethod: 2 // this id you'll send and get from backend
}

#3

If you want to select a value as default, in your form builder give it a value :

如果要选择默认值,请在表单构建器中为其指定值:

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

Now in your HTML :

现在在您的HTML中:

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

What my code does is giving your select a value, that is equal to the first value of your options list. This is how you select an option as default in Angular, selected is useless.

我的代码所做的是给你一个选择一个值,它等于你的选项列表的第一个值。这是您在Angular中选择默认选项的方法,选择是无用的。

#4

Remove [selected] from option tag:

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

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

And in your form builder add:

并在您的表单生成器中添加:

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

#1

-1