页面加载时，带有 NgValue 的 NgFor 未在选择选项下拉列表中显示列表中的第一个对象答案

【问题标题】：NgFor with NgValue is not showing first object from the list in the select options dropdown when page loads页面加载时，带有 NgValue 的 NgFor 未在选择选项下拉列表中显示列表中的第一个对象
【发布时间】：2019-09-09 23:59:28
【问题描述】：

我有一个包含对象列表的选择选项下拉列表。我正在使用 ngValue 将下拉列表的值设置为对象。但是，当页面加载时，下拉列表不显示列表中的第一个对象，它显示仅当我单击并打开对象时。

我尝试使用 [selected] 属性首先显示预选选项，我也尝试了比较功能，但它似乎不起作用。

<select class="form-control" #selectedValue 
name="selectedValue" id="selectedValue"
 [(ngModel)]="selectedValue[i]" 
(ngModelChange)=onChange($event)>
<option *ngFor="let item of items" [ngValue]="item">
{{item.text}}</option>
</select>

希望在组件初始化时预先选择下拉列表中的第一个选项，而无需单击下拉列表

【问题讨论】：

项目只是一个字符串数组吗？
不是。它是一个对象数组

标签： angular angular7

【解决方案1】：

您的 ngMoodle 是“selectedValue[i]”。因此，如果您必须在打开之前预选一个值，则需要一个与 selectedValue[i] 关联的值。

试试下面哪个更简洁，使用更少的变量来达到同样的效果：

HTML：

<select class="form-control" [(ngModel)]="selectedValue">
 <option *ngFor="let item of items" [ngValue]={{item.Id}}>
     {{item.text}}
 </option>
</select>

在 ts 文件中用默认值声明 selectedValue

【讨论】：