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

前端之家收集整理的这篇文章主要介绍了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>

猜你在找的HTML5相关文章