如何在angular8的下拉列表中设置初始值答案

【问题标题】：How to set initial value in dropdown in angular8如何在angular8的下拉列表中设置初始值
【发布时间】：2021-01-11 19:27:36
【问题描述】：

我在下拉菜单中有两个项目。我需要将初始值设置为下面数组中的第一个值是我的代码

objects = ['production', 'development'];
this.object = this.objects[0];

<div class="item">
  <select formControlName="db" class="form-control" (change)="changeDb($event)" [ngModel]="object">
    <option *ngFor="let object of objects" [ngValue]="object">{{object}}</option>
</select>
</div>

该值不是使用上面的代码设置的。它显示在 ng reflect 模型中，但不在 UI 中

【问题讨论】：

这能回答你的问题吗？ Select default option value from typescript angular 6
不，我试过了，但没有运气

标签： angular drop-down-menu

【解决方案1】：

如果默认对象等于数组中的对象，则可以添加“if”语句，然后在元素中添加 selected 属性。还将您的变量名称更改为“defaultObject”，以免在您的“for of”语句中发生冲突。

objects = ['production', 'development'];
this.defaultObject = this.objects[0];

<div class="item">
  <select formControlName="db" class="form-control" (change)="changeDb($event)" [ngModel]="object">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="defaultObject == object">{{object}}. 
    </option>
  </select>
</div>

【讨论】：

我试过你的答案，但下拉列表中仍然没有设置值。
您是否尝试将其他初始变量更改为 this.defulatObject？并添加 [selected]="defaultObject == object"?我试过你的代码，只是编辑了这些部分，它可以工作。
是的，我已经改变了
你能试试这个代码吗：我有这个简化的方法供你测试。在您的 HTML 文件中：

在你的 .ts 文件中 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) 导出类 AppComponent { public objects = ['production', 'development']; public defaultObject = this.objects[2]; }

【解决方案2】：

您可以像这样使用 ngModel 绑定来干净利落地实现这一点：

组件.ts

export class AppComponent  {
  objects = ['production', 'development'];
  // The selected node of the objects array
  selected = this.objects[1];
}

component.html

<div class="item">
  <select class="form-control" (change)="changeDb($event)" [ngModel]="selected">
    <option *ngFor="let object of objects">{{object}}</option>
  </select>
</div>

上面的代码会预先选择对象数组的“开发”节点。

所以在你的情况下预选第一个选项，你会改变：

selected = this.objects[1];

到：

selected = this.objects[0];

Stackblitz 示例：https://stackblitz.com/edit/angular-esulus

【讨论】：