typescript Angular 4 Selected 在模型中给出时无法正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48003432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 Selected not working properly when it is given in model?
提问by Abhishek Ekaanth
When I'm trying to give a drop-down menu. By default, I need to select a value that needs to be displayed. When I'm not using a ngModel I'm able to display the default value.
当我尝试提供下拉菜单时。默认情况下，我需要选择一个需要显示的值。当我不使用 ngModel 时，我可以显示默认值。
Without ngModel
没有 ngModel
<select class="form-control">
<option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>
The Above code works fine when we compile it. I'm able to see first value on the list to be displayed.
当我们编译它时，上面的代码工作正常。我能够看到要显示的列表中的第一个值。
With ngModel
使用 ngModel
<select class="form-control" [(ngModel)]="selectedListType">
<option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>
This is the display is empty.
这是显示为空。
Methods tried:
尝试的方法：
- used Selected
- 二手 已选
<option *ngFor="let type of ListType" [selected]="type.name === 'Dislike'" [value]="type .id">{{type .name}}</option>
<option *ngFor="let type of ListType" [selected]="type.name === 'Dislike'" [value]="type .id">{{type .name}}</option>
- used attr.Selected
- 使用 attr.Selected
<option *ngFor="let type of ListType" [ngValue]="type " [attr.selected]="type .name== type.name ? true : null">{{ type.name }}</option>
<option *ngFor="let type of ListType" [ngValue]="type " [attr.selected]="type .name== type.name ? true : null">{{ type.name }}</option>
EDIT
编辑
- Even Tried to set the selected value via model still no outcome.
- 即使尝试通过模型设置所选值仍然没有结果。
Is there any alternative way? Or Am I doing something wrong?
有什么替代方法吗？还是我做错了什么？
回答by AJT82
You are defining the value for the selectas the idvalue, whereas you are feeding the selectedListTypewith the nameproperty. So what you want to do is either provide the idvalue for selectedListType, so for example if your ListTypelooks like this:
您将 的值定义select为id值，而您正在为selectedListType提供name属性。所以你想要做的是要么为 提供id值selectedListType，例如，如果你ListType看起来像这样：
[{id:1, name: 'Dislike'},{...}]
you want to set selectedListyTypevalue as 1. Other option is, if you do not know the id value you can do:
您想将selectedListyType值设置为1. 其他选项是，如果您不知道 id 值，您可以执行以下操作：
ngOnInit() {
this.selectedListType = this.ListType.find(x => x.name === 'Dislike').id
}
and your template will then look like this:
然后您的模板将如下所示：
<select class="form-control" [(ngModel)]="selectedListType">
<option *ngFor="let type of ListType" [value]="type.id">{{type.name}}</option>
</select>
回答by Hrishikesh Kale
Try Keeping you value and ngModel same like
尝试保持你的价值和 ngModel 一样
value = {{type .id}}and [(ngModel)]= "selectedListType.id"
value = {{type .id}}和 [(ngModel)]= "selectedListType.id"
and print the value once it is selected in html
并在 html 中选择后打印该值
<br>id is {{selectedListType.id}}
