html5 – Angular 4在模型中给出时选择不正常？

当我试图给出一个下拉菜单.默认情况下,我需要选择需要显示的值.当我没有使用ngModel时,我能够显示默认值.

没有ngModel

<select class="form-control">
    <option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>

上面的代码在编译时工作正常.我能够在列表中看到要显示的第一个值.

使用ngModel

<select class="form-control" [(ngModel)]="selectedListType">
    <option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>

这是显示为空.

方法尝试：

>使用选择

< option * ngFor =“let List of ListType”[selected] =“type.name ==='dislike'”[value] =“type .id”> {{type .name}}< / option>

>使用了attr.Selected

< option * ngFor =“let List of ListType”[ngValue] =“type”[attr.selected] =“type .name == type.name？true：null”> {{type.name}}< /选项> 编辑
>甚至尝试通过模型设置所选值仍然没有结果.

还有其他方法吗？
要么
难道我做错了什么？

解决方法

您正在将select的值定义为id值,而您正在使用name属性提供selectedListType.所以你要做的是为selectedListType提供id值,例如,如果你的ListType如下所示：

[{id:1,name: 'dislike'},{...}]

您希望将selectedListyType值设置为1.其他选项是,如果您不知道id值,则可以执行以下操作：

ngOnInit() {
  this.selectedListType = this.ListType.find(x => x.name === 'dislike').id
}

然后您的模板将如下所示：

<select class="form-control" [(ngModel)]="selectedListType">
  <option *ngFor="let type of ListType" [value]="type.id">{{type.name}}</option>
</select>