Angular 4设置下拉列表中的选定选项

Question

关于这个问题和不同的答案有几个问题，但没有一个真正回答这个问题。再次：

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

它不选择任何东西。可用的选项是：

• 真的
• 假的
• 虚假的

但静态真实：

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

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

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

原文由 Gregor Sklorz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您想根据 true / false 使用选择一个值

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

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

一探究竟

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

原文由 Viijay ijardar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我的例子：

 <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>

在组件中，您必须从选择中获取值：

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

因此，如果您希望 select 选择一个默认值（并且可能您想要这样）：

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

原文由 Carnaru Valentin 发布，翻译遵循 CC BY-SA 3.0 许可协议