Html 在选择标签中使用 [ngValue] 和 [selected]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41299247/
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
Use [ngValue] and [selected] in select tag
提问by TheFisherman
I'm trying to set the default value of a select tag containing objects in a form, using [selected] and [ngValue]. But for some reason they seem incompaptible.
我正在尝试使用 [selected] 和 [ngValue] 设置包含表单中对象的选择标记的默认值。但出于某种原因，它们似乎不兼容。
Example code:
示例代码：
<select id="selectedStore" *ngIf="showStore"
class="form-control"
formControlName="homeStore"
tabindex="{{getTabIndex('homeStore')}}">
<option *ngFor="let store of availableStores"
[ngValue]="store"
[selected]="store.storeId == personalInfo.homeStore?.storeId">
{{store.name}}
</option>
</select>
This code ends up just showing blank as the default value. If I remove the [ngValue] it works fine, except that then it's the store.name value that gets selected, instead of the store object.
此代码最终仅显示空白作为默认值。如果我删除 [ngValue] 它工作正常，除了它是被选中的 store.name 值，而不是 store 对象。
Any suggestions?
有什么建议？
回答by Touqeer Shafi
You can use compareWithwith [ngValue]
你可以用compareWith与[ngValue]
eg:
例如：
<select id="selectedStore" *ngIf="showStore"
class="form-control"
formControlName="homeStore"
tabindex="{{getTabIndex('homeStore')}}" [compareWith]="compareByID">
<option *ngFor="let store of availableStores"
[ngValue]="store">
{{store.name}}
</option>
</select>
compareByID(itemOne, itemTwo) {
return itemOne && itemTwo && itemOne.ID == itemTwo.ID;
}
See: https://github.com/angular/angular/pull/13349
见：https: //github.com/angular/angular/pull/13349
Example Compare select options: http://blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/
示例比较选择选项：http: //blog.ninja-squad.com/2017/03/24/what-is-new-angular-4/
Note: this support is added in Angular4
注意：这个支持是在 Angular4 中添加的
回答by Günter Z?chbauer
[ngValue]="..."is supposed to be used with [(ngModel)]. [selected]doesn't work with [ngValue].
[ngValue]="..."应该与[(ngModel)]. [selected]不适用于[ngValue].
回答by Sandip - Full Stack Developer
Update your select tag as below, ngModelwill hold selected value
更新您的选择标签如下，ngModel将保持选定的值
<select [(ngModel)]="selectedItem.Page.ID" class="form-control" (change)="OnPageSelected($event.target.value)">
<option *ngFor="let page of PageCollection.Items;" value={{page.ID}}>
{{page.Name}}
</option>
</select>
回答by Juany
Add a
添加一个
[ngModel]="yourDefaultObject"
to your select and same for the first option
到您的选择和第一个选项相同
回答by Abel Valdez
Im posting my asnwer because maybe someone is getting the same behavior.
我发布了我的回答，因为也许有人有同样的行为。
Im receiving a value from API and I need to assign to the form control then you can not assign it directly. You need to use the same availableStoresinstance array and find the value inside.
Thats the way to get [ngValue]works perfectly.
我从 API 接收一个值，我需要分配给表单控件，然后你不能直接分配它。您需要使用相同的availableStores实例数组并找到其中的值。这就是获得[ngValue]完美作品的方法。
control.setValue(this.availableStores.find(
store => store.name === this.valueFromAPI.name
));
<select
class="form-control"
formControlName="homeStore"
>
<option
*ngFor="let store of availableStores"
[ngValue]="store">
{{store.name}}
</option>
</select>
Reference https://angular.io/api/forms/SelectControlValueAccessorcheck the first example.
参考https://angular.io/api/forms/SelectControlValueAccessor检查第一个例子。
